17370845950

要让背景图片铺满整个页面，需设置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，简洁高效；如果页面结构复杂（比如有固定头部），可另建一个 并设为 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 对小屏幕换一张竖构图的图，提升移动端显示效果