要让背景图片铺满整个页面，需设置html和body高度为100%、清除默认margin和padding，并将background: url('xxx.jpg') no-repeat center center / cover应用在body或固定定位全屏容器上。
要让背景图片铺满整个页面，关键是用 background-size: cover，但光写这一句还不够——必须确保父容器（通常是 html 和 body）高度撑满视口，且背景图应用在正确元素上。
设置 html 和 body 高度为 100%
浏览器默认 body 高度由内容决定，不会自动占满屏幕。若背景设在 body 上，却没给它足够高度，cover 就无法按视口铺满。
- 给
html和body同时设置height: 100% - 清除默认 margin 和 padding，避免空白边干扰
- 加上
margin: 0; padding: 0;
把背景图应用到 body 或一个全屏容器上
推荐直接设在 body，简洁高效；如果页面结构复杂（比如有固定头部），可另建一个 <div class="bg-cover"></div> 并设为 position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;。
- 背景属性建议一次性写全：
background: url('xxx.jpg') no-repeat center center / cover; -
center center让图片居中对齐，/ cover是background-size: cover的简写形式 - 避免只写
background-image，否则其他背景相关属性（如重复、定位）会沿用浏览器默认值
注意图片宽高比和裁剪逻辑
cover 的原理是“等比缩放图片，直到完全覆盖容器”，所以一定会填满，但也一定会裁剪——短边超出部分被隐藏。如果原图太窄或太扁，可能关键内容被切掉。
立即学习“前端免费学习笔记（深入）”；
- 优先选用横竖比例接近 16:9 或 4:3 的高清大图
- 关键主体尽量放在图片中央区域
- 调试时可临时加
background-color: #000;看是否真铺满，排除透明或加载失败干扰
兼容性与备选方案
background-size: cover 在所有现代浏览器包括 IE9+ 都支持，基本无需前缀。若需支持 IE8 及更早版本，只能用 JavaScript 模拟（不推荐），或改用纯色/渐变做后备。
- 写法中可加一层兜底：
background-color: #2c3e50;（深蓝）防止图片加载失败时白屏 - 响应式场景下，可结合
@media对小屏幕换一张竖构图的图，提升移动端显示效果
