background-image 要生效，必须确保容器有明确高度（如 height: 100vh 或 min-height: 100vh），且配合 background-size: cover（填满裁剪）或 contain（完整留白）、no-repeat 和 center 定位；路径需相对 CSS 文件，避免 404。
background-image 怎么写才生效
直接写 background-image: url("xxx.jpg") 很可能没反应——因为父容器没高度，图片自然不显示。常见错误是只给 <body> 或 <html> 设背景图，但没设 height 或 min-height，导致实际渲染高度为 0。
必须确保目标元素有明确高度（或能撑开的高度），推荐做法是同时设置：
html, body { height: 100%; margin: 0; }body { background-image: url("bg.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center; }
background-size: cover 和 contain 的区别在哪
全屏填充用 cover，不是 contain。前者等比缩放图片直到完全覆盖容器（可能裁剪边缘），后者等比缩放直到整张图完整可见（可能留白）。
典型误用场景：用 contain 做登录页背景，结果顶部和底部大片空白；或者用 100% 100% 强拉变形，图片失真。
立即学习“前端免费学习笔记（深入）”；
真正全屏无白边、不变形的组合是：
background-size: cover-
background-position: center（避免偏移） -
background-attachment: fixed（可选，实现视差效果，但注意移动端兼容性）
移动端全屏背景为什么被压缩或留黑边
iOS Safari 和部分安卓浏览器对 height: 100vh 解析异常（比如地址栏收起/展开时 vh 值会变），导致背景图无法真正撑满可视区。
更稳妥的方案是放弃依赖 100vh，改用：
-
min-height: 100vh（保留弹性） - 加
background-attachment: scroll（禁用fixed，避免 iOS 滚动卡顿） - 必要时用 JS 补充一次
document.body.style.minHeight = window.innerHeight + "px"（仅在resize后重置）
图片路径不对或 404 怎么快速排查
背景图报错不会像 <img> 那样显示占位符，而是静默失败。打开开发者工具 → Network 标签页，筛选 Img 类型，看是否有 404 请求，响应里会明确写出请求的完整路径。
常见路径陷阱：
- CSS 文件里写
url("images/bg.jpg")，但 CSS 在/css/style.css，图片实际在/images/→ 路径是相对 CSS 文件位置，不是 HTML 位置 - 用 Webpack/Vite 等构建工具时，静态资源需放在
public/下才按原路径访问，否则要走asset导入 - 本地双击 HTML 打开（
file://协议），部分浏览器禁止加载本地背景图，必须起本地服务测试
