背景图不显示主因是路径错误，应使用绝对路径url(/img/bg.jpg)或相对路径url(./bg.jpg)；需配合background-size、background-repeat等属性控制显示效果；body设背景时加min-height:100vh或改设html上；base64和渐变可避免路径问题。
background-image 用法和路径写错最常见
背景图不显示，八成是 background-image 的路径错了。浏览器不会报错，只是默默不加载——你得打开开发者工具的 Network 标签页，看图片请求是不是 404。
相对路径以 HTML 文件位置为基准，不是 CSS 文件位置。比如 HTML 在根目录，CSS 在 /css/style.css，但你在 CSS 里写 url(img/bg.jpg)，那浏览器会去请求 /img/bg.jpg，而不是 /css/img/bg.jpg。
- 推荐统一用以站点根目录为起点的绝对路径：
url(/img/bg.jpg) - 如果图在 CSS 同级目录，写
url(./bg.jpg)；上一级是url(../img/bg.jpg) - 别漏写
url()，直接写background-image: img/bg.jpg是无效的
background-size 和 background-repeat 不设就容易糊或重复
默认情况下，背景图不拉伸、不缩放，也不平铺（background-repeat: repeat 实际是默认值），小图会在整个容器里密密麻麻重复，大图只显示左上角一部分。
- 全屏覆盖且不变形：
background-size: cover - 完整显示整张图、留黑边：
background-size: contain - 完全拉伸填满（可能变形）：
background-size: 100% 100% - 禁用重复：
background-repeat: no-repeat
这四个属性常一起用，单独改一个往往没效果。
立即学习“前端免费学习笔记（深入）”；
body 上设背景图要小心高度塌陷
如果只给 设了 background-image，但页面内容很少，背景图可能只显示一屏高，往下滚动就变白——因为 body 高度没撑开。
- 加
min-height: 100vh强制最小视口高度 - 更稳妥的是设在
上：html { background: url(...) no-repeat center center; background-size: cover; } - 避免用
height: 100%，它依赖父容器高度，在html上无效
base64 或渐变色当背景时不用路径
不想发额外 HTTP 请求，可以直接把小图转成 base64 放进 CSS，或者用 linear-gradient 写纯色过渡。
- base64 示例：
background-image: url("data:image/svg+xml;base64,PHN2Zy...") - 渐变示例：
background: linear-gradient(135deg, #ff6b6b, #4ecdc4) - 注意：base64 太长会拖慢 CSS 解析，图标类小图才适合
这些写法不涉及路径，也就绕开了相对/绝对路径混乱的问题，但调试时没法右键“在新标签页查看图片”——得靠 DevTools 的 Styles 面板点开预览。
