HTML5中背景图必须用CSS的background-image实现，应写在或外部CSS中而非HTML内联样式，路径需相对于CSS文件，常见问题多因路径错误导致404。
HTML5 本身没有“加背景图片”的新语法，所有背景图都靠 CSS 的 background-image 实现， 或其他标签只是容器，关键在样式写法和路径是否正确。
background-image 写在哪？别塞在 HTML 标签里
很多人习惯在 里直接写，这能用但不推荐——维护难、无法复用、内联样式优先级高，后期容易覆盖失败。
- ✅ 推荐：写在
<style></style>块或外部 CSS 文件里，比如给加背景：body { background-image: url('bg.jpg'); } - ⚠️ 注意：URL 路径是相对于当前 CSS 文件的位置，不是 HTML 文件。如果 CSS 是外链的，
url('img/bg.jpg')就要按 CSS 文件所在目录算起 - ❌ 别这么写：
—— 临时调试可以，上线前务必抽离
图片路径总 404？检查这三件事
90% 的“背景图不显示”问题出在路径或服务器配置，不是语法错。
- ✅ 先确认图片文件真实存在，且大小写完全匹配（Linux 服务器区分
bg.JPG和bg.jpg） - ✅ 用浏览器开发者工具（F12）看 Network 面板，点那个 404 请求，看它实际请求的是什么 URL，反推路径写错了哪一级
- ✅ 如果用相对路径，避免
../images/bg.jpg这种跨多层写法；更稳的方式是用根相对路径：url('/assets/bg.jpg')（前提是你的站点部署在域名根目录）
background-size、background-repeat 这些属性不加会怎样？
默认行为很“老实”：图片原尺寸平铺，不缩放、不居中，小图会重复铺满整个页面，大图只显示左上角一小块。
立即学习“前端免费学习笔记（深入）”；
- ✅ 必加组合（常用场景）：
body { background-image: url('bg.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center; } - ⚠️
cover会等比缩放填满容器，可能裁剪边缘；contain则完整显示全图，但可能留白 - ⚠️
background-repeat: no-repeat不加的话，一张小图会密密麻麻铺满屏幕，尤其在移动端特别明显
想让背景图随滚动消失？别用 background-attachment: fixed
这个属性在 iOS Safari 和部分安卓 WebView 里有兼容性问题：滚动卡顿、背景错位、甚至触发白屏。不是 bug，是硬件加速限制。
- ✅ 替代方案：用伪元素 +
position: fixed模拟，控制更稳body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('bg.jpg'); background-size: cover; z-index: -1; } - ⚠️ 记得给
body加margin: 0和padding: 0，否则伪元素可能被默认边距顶偏 - ⚠️ 如果页面内容高度不足一屏，
fixed伪元素会盖住底部内容，此时改用position: absolute+min-height: 100vh
真正麻烦的从来不是怎么写那行 background-image，而是路径是否对、尺寸是否适配、移动端是否崩、旧浏览器是否退化显示——这些细节没试过真机和真路径，光抄代码没用。
