HTML5 中 body 的 background 属性已废弃，现代浏览器中不可靠；背景不显示主因是 body 默认无高度、需设置 min-height: 100vh 且 html 需 height: 100%，同时注意路径、尺寸、兼容性及 fallback。
HTML5 中 body 的 background 属性已完全废弃，直接写 <body background="xxx.jpg"> 在现代浏览器中虽可能“偶然生效”，但属于不可靠的遗留行为，不应在新项目中使用。
为什么 background 属性在 body 上经常不显示
不是图片路径错了，而是 HTML 渲染机制导致的“视觉失效”：
-
body默认没有高度，只包裹内容；空页或短内容时，它可能只有几像素高，背景图自然只显一窄条 - 多数 CSS 重置（如 Normalize.css）或框架（如 Bootstrap）会把
body的margin设为0，同时没补min-height，进一步加剧空白 -
html元素本身默认也不占满视口，100%高度依赖父容器，而html的父容器是 viewport —— 它不认%，只认vh - 即使写了
background，若没配background-size和background-position，小图会被重复平铺、偏移或拉伸失真
background-image 写在 style 里为什么还是不全屏
内联写法如 <body style="background-image: url(bg.jpg)"> 看似简单，但实际绕不开三个硬约束：
- 必须同步加
min-height: 100vh（不是height: 100vh），否则长页面滚动时底部露白 -
html元素需加height: 100%或min-height: 100%，否则某些旧版 Safari 对vh解析异常 -
background-attachment: fixed在 iOS Safari 上容易错位或卡顿，应优先用scroll - 路径是相对于当前 HTML 文件位置解析的，Webpack/Vite 构建后资源带 hash，内联写死路径必 404
CSS 中设置 body 背景图的最小可靠写法
把背景逻辑收进外部或内部 CSS，兼顾兼容性与可维护性：
html {
min-height: 100%;
}
body {
margin: 0;
min-height: 100vh;
background-color: #f0f0f0;
background-image: url('./assets/bg.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: scroll;
}
@media (max-width: 768px) {
body {
background-image: none;
}
}
-
background-color必须写在background-image前面，否则会被简写覆盖；也可合并为background: #f0f0f0 url(...) no-repeat center/cover，但注意顺序：颜色 → 图片 → repeat → position/size -
cover在 iOS Safari 有时渲染不准，加background-position: center center可增强居中稳定性 - 响应式降级用
@media关掉图片，避免小屏加载大图、拉伸失真或首屏延迟 - 构建项目中，路径推荐用 Vite 的
url('@/assets/bg.jpg')或 Webpack 的~assets/bg.jpg别名，不写死相对路径
真正容易被忽略的点是：背景是否生效，和“有没有写 background”关系不大，而取决于 html 和 body 的尺寸链是否闭合、是否被其他样式意外覆盖、以及图片加载失败时有没有 fallback 颜色。调试时先用 background-color: hotpink 确认铺满范围，再换图，比反复改 URL 有效得多。
