背景图不显示最常见的原因是路径错误、background-repeat默认平铺小图导致视觉不可见、元素无宽高；需检查CSS文件相对路径、添加no-repeat验证、确保元素有尺寸。
背景图路径写错导致不显示
最常见的原因是 url() 里的路径没写对，尤其是相对路径容易出错。浏览器加载背景图时，路径是相对于当前 CSS 文件的位置，不是 HTML 文件位置。
检查方法：把 url() 里的路径单独复制出来，粘贴到浏览器地址栏（拼在域名后面），看能否直接访问到图片。如果 404，就说明路径错了。
- 用相对路径时，确认 CSS 文件和图片的目录层级关系，比如 CSS 在
css/style.css，图片在images/bg.png，那应该写url(../images/bg.png) - 避免用根目录路径（如
/images/bg.png）却部署在子目录下，此时需改用相对路径或配置正确的base href - 路径中不要漏掉扩展名，
bg和bg.png是两个不同资源
background-repeat 默认值让图案“看不见”
如果只设了 background-image 但没指定尺寸或重复方式，而图片本身很小（比如 1×1 像素），又恰好是纯色或透明，就会误以为“没显示”。其实它正在平铺，只是效果不可见。
典型表现：元素有宽高、背景色设了但图没出现，审查元素看到 background-image 已加载，但视觉上空白。
立即学习“前端免费学习笔记（深入）”；
- 快速验证：临时加一句
background-repeat: no-repeat;，再看是否出现单张图 - 若想铺满容器，优先用
background-size: cover;或contain;，而不是依赖默认平铺 - 注意
background-repeat: repeat-x或repeat-y在特定布局下也可能“漏掉”内容区域
其他关键检查点
路径和重复方式都对，还是不显示？继续往下排查。
- 元素没有宽高：
div等非替换元素若无内容、无显式width/height，高度为 0，背景自然不可见 - CSS 优先级被覆盖：用浏览器开发者工具检查 computed 样式，确认
background-image没被其他规则（比如background: none;）清空 - MIME 类型错误：服务器返回图片时用了错误的
Content-Type（如 text/plain），某些浏览器会拒绝渲染——可通过 Network 面板看响应头 - 图片格式不支持：CSS 中引用
.webp但在老版 Safari 中不支持，可加回退：background-image: url(bg.jpg); background-image: url(bg.webp);
background-repeat 是否掩盖了小图、元素自身有没有可渲染的尺寸——这三个点卡住大多数“背景图不显示”的真实场景。 
