background-size: cover没铺满屏幕的根本原因是容器无足够高度，需设html和body为height:100%或min-height:100vh，清除默认margin，并配background-position:center center和no-repeat。

background-size: cover 为什么没铺满整个屏幕

不是属性写错了，是它根本没容器可盖。浏览器里 body 默认高度由内容撑开，可能只有 20px；background-size: cover 就按这 20px 缩放图片，当然看不见效果。常见现象包括：图片只占顶部一截、左右留白、滚动时背景上滑脱节，甚至整张图消失。

• html 和 body 没设 height: 100% 或 min-height: 100vh，cover 失去高度参照
• body 有默认 margin: 8px，导致背景边缘被“挤出”视口
• 背景设在某个 div 上，而该 div 是 Flex 子项且未设 align-items: stretch，实际高度为内容高
• 用了 background-attachment: fixed，但在 iOS Safari（尤其旧版本）中常失效，造成滚动错位，误判为 cover 问题

必须配齐的三个 CSS 声明

单独写 background-size: cover 不够，它依赖容器尺寸、背景原点和重复行为共同生效。缺一不可：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• min-height: 100vh（或 height: 100% 配合 html { height: 100% }）——确保容器真正撑满视口高度；100dvh 更稳，可规避 iOS 地址栏收放抖动
• background-position: center center——防止图片偏左/偏上；若关键内容在顶部（如人像），可改用 center top
• background-repeat: no-repeat——否则小图会被平铺，cover 直接失效

设在 html 还是 body 上？

推荐直接设在 html 上。原因很实在：

• body 默认带 margin，即使清了，某些浏览器仍会因滚动条宽度变化导致背景微移
• html 是根容器，设背景后不会随内容滚动“上滑”，视觉更稳定
• 若设在 body，必须同步保证 html { height: 100% }，否则 body { height: 100% } 无参照
• Bootstrap 等框架中，避免把背景写在 .container 上——它默认最大宽度 1140px，左右留白，cover 再拉伸也只是“中间一块”

cover 和 contain 的区别不是风格偏好，而是裁剪逻辑

二者都等比缩放，但结果相反，选错会直接导致留白或关键内容被切掉：

• cover：缩放到「至少一边填满容器」，另一边必然溢出 → 必然裁剪，适合 Banner、氛围图
• contain：缩放到「最多一边贴边」，另一边必然留空 → 必然留白，适合 Logo、图标、需完整识别的内容
• 别用 100% 100% —— 它强制拉伸，宽高比破坏，人像/文字发虚，Retina 屏下更糊
• 裁哪一部分，全靠 background-position 控制；不真机测试，只看设计稿，上线后人脸被切一半很常见

实际最常被忽略的，是图片构图中心和 background-position 的匹配关系——cover 一定会裁，但裁得是否合理，得靠你手动调锚点，而不是指望它“自动聪明”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！