最简可用的 body 背景图 css 是：body { background: url("bg.jpg") no-repeat center center/cover; }，需确保路径正确、html/body 高度为 100%、并设 background-color 作降级。
直接用 background-image 配合 body 选择器就能设，但默认会平铺、拉伸错乱、不居中——得手动关掉平铺、固定位置、覆盖全屏才算真正“背景图”。
怎么写最简可用的 body 背景图片 CSS
只加一行 background-image 不够，必须搭配控制行为的属性，否则图片会重复、裁剪异常或留白：
-
background-image: url("bg.jpg");—— 图片路径要对，相对路径从 HTML 文件位置算起 -
background-repeat: no-repeat;—— 必须关掉平铺，否则小图变满屏马赛克 -
background-size: cover;—— 拉伸填满视口且不变形（contain会留白，100% 100%会强行拉伸失真） -
background-position: center center;—— 确保图片始终以中心为锚点对齐 -
background-attachment: fixed;—— 可选，加了才实现“视差滚动”效果（滚动时背景不动）
合并写法更常用：
body {<br> background: url("bg.jpg") no-repeat center center/cover;<br>}注意斜杠 / 是 background-position 和 background-size 的简写分隔符，CSS 里合法。
为什么图片总显示不出来或只显示左上角一小块
常见不是代码写错，而是路径或加载时机问题：
- 路径写成
url("images/bg.jpg")，但实际文件在assets/bg.jpg—— 浏览器控制台 Network 标签页看 404 请求就能确认 - 图片太大（比如 5MB），加载慢，页面先渲染完再显示 —— 加
background-color: #f0f0f0;防白屏 - 没设
height: 100vh;或内容为空时body高度塌陷，背景只显示几像素高 —— 给html, body { height: 100%; }更稳妥 -
background-size: cover;在窄屏下可能把人脸切掉 —— 改用background-size: 100vw auto;强制宽度撑满，高度自适应（但会有上下留黑）
移动端适配要注意什么
手机 Safari 和部分安卓浏览器对 background-attachment: fixed 支持差，会失效甚至卡顿：
- 如果用了
fixed，务必加@supports (background-attachment: fixed)做检测，或直接放弃该效果 - 小图资源建议用 WebP 格式（
url("bg.webp")），比 JPG 小 30%，但需备一个 JPG 回退：body {<br> background-image: url("bg.webp");<br>}<br>@supports not (background-image: url("test.webp")) {<br> body { background-image: url("bg.jpg"); }<br>} - iOS Safari 有时不触发背景图重绘 —— 加
transform: translateZ(0);到body可强制硬件加速（副作用是可能影响滚动手感）
真正难的不是写那几行 CSS，而是判断这张图在不同设备上是否被裁得恰到好处、加载是否足够快、 fallback 是否自然——这些没法靠一次设置搞定，得实机多测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
