CSS背景图关键在路径管理与属性配合：相对路径以CSS文件为基准，绝对路径以根目录开头；background-size用cover/contain控缩放，配合no-repeat和center定位；慎用fixed导致移动端失效，推荐外部CSS类控制。
background-image 用法和常见写错路径的问题
直接用 background-image 加背景图，最常出错的是路径不对——浏览器找不到图，控制台报 404，但页面看起来“好像没加”，其实样式已生效，只是图加载失败。
- 相对路径以当前 CSS 文件位置为基准，不是 HTML 文件位置
- 如果 CSS 在
css/style.css，图片在images/bg.jpg，就得写url(../images/bg.jpg) - 用绝对路径更稳：以站点根目录开头，比如
url(/images/bg.jpg)（注意开头的/） - URL 中空格、中文、特殊字符必须编码，或干脆改用英文命名
background-size 怎么让图片铺满又不失真
默认 background-image 只显示原图大小，且会重复平铺。要让它“刚好填满容器”又不拉伸变形，background-size 是关键。
-
background-size: cover：等比缩放至完全覆盖容器，可能裁剪边缘 -
background-size: contain：等比缩放至全部可见，可能留白 -
background-size: 100% 100%：强制拉伸填满，会变形，慎用 - 配合
background-position: center可控裁剪区域，尤其在cover下有用
background-repeat 和 background-attachment 实际影响什么
这两个属性看着冷门，但滚动体验和视觉连贯性全靠它们。
-
background-repeat: no-repeat必须显式写，否则默认平铺（repeat），小图会变成密密麻麻的马赛克 -
background-attachment: fixed让背景图随视口固定，滚动时像“穿透页面”一样不动——但移动端兼容性差，Safari 可能失效或卡顿 - 现代替代方案是用
background-attachment: scroll（默认值）+background-position动态计算，或改用position: sticky容器模拟
内联样式 vs 外部 CSS 中 background-image 的区别
用 style="background-image: url(...)..." 写在 HTML 标签里，看似方便，实则埋坑。
立即学习“前端免费学习笔记（深入）”；
- 路径解析仍以 HTML 文件位置为准，和外部 CSS 规则不同，容易混乱
- 无法用伪类（如
:hover）切换背景图，也不支持媒体查询响应式切换 - 不方便复用、维护，JS 动态改图也更麻烦（得操作
style.backgroundImage字符串） - 推荐始终用 class + 外部 CSS，需要动态控制时用 JS 切换 class 名，而不是拼 URL
body {
background-image: url(/images/hero-bg.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
}
CSS 背景图真正难的不是写法，而是路径管理、响应式 fallback（比如没图时的纯色备用）、以及 background-attachment: fixed 在 iOS 上静默失效这种看不见的坑。 
