背景图不显示最常见的原因是路径错误、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-imag

  

  e: url(bg.jpg); background-image: url(bg.webp);

路径是否基于 CSS 文件位置、background-repeat 是否掩盖了小图、元素自身有没有可渲染的尺寸——这三个点卡住大多数“背景图不显示”的真实场景。