background-size: contain 不能平铺，因其语义是完整缩放不裁剪不重复，与 repeat 互斥；真正实现等比缩放后平铺需用 background-size 配合数值或 auto 与 repeat-x/y 组合。
background-size: contain 不能实现平铺，这是根本性误解
很多人搜“background-size: contain 平铺背景图”，结果页面白屏或图片只显示一次——因为 contain 的语义是“完整缩放至容器内可见，不裁剪、不重复”，它和 repeat 是互斥的。你要的是“按比例缩放后平铺”，不是“缩放到刚好装下”。直接用 contain 加 background-repeat: repeat，浏览器会优先尊重 contain，忽略 repeat，最终只渲染一张缩放后的图。
真正能按比例平铺的方案：background-size 配合数值或 cover/contain 的替代思路
想让背景图等比缩放后无缝铺满整个容器（比如 banner 区域随屏幕拉伸仍保持清晰），核心是控制缩放比例 + 启用重复。常见可行路径有：
-
background-size: 100% 100%：强制拉伸填满，但会失真（非等比） -
background-size: auto 100%或100% auto：保持宽高比，单向拉伸，另一方向自动适配，再配合background-repeat: repeat-x或repeat-y - 最接近需求的做法：
background-size: <em>[固定像素值]</em> auto（如200px auto），然后设background-repeat: repeat—— 这样图按宽度缩放到 200px，高度等比计算，再横向/纵向重复 - 如果必须基于原始图宽高比动态计算：需 JS 获取
image.naturalWidth / naturalHeight，再设置background-size数值，纯 CSS 无法获取图片原始尺寸
常见错误现象：contain + repeat 为什么没反应
写成这样：
div {
background-image: url(bg.jpg);
background-size: contain;
background-repeat: repeat;
}
实际效果是：只显示一张居中、等比缩放的图，其余区域空白。原因在于 W3C 规范明确指出，当 background-size 为 contain 或 cover 时，background-repeat 的行为被覆盖，浏览器会忽略 repeat 值，强制使用 no-repeat 语义。这不是 bug，是设计如此。
立即学习“前端免费学习笔记（深入）”；
更实用的替代：用伪元素 + object-fit 模拟“可平铺的 contain”
如果你需要视觉上“像 contain 那样等比缩放，又能铺满”，又不想手动算尺寸，可以用 ::before 伪元素加载图片，配合 object-fit: contain 和绝对定位模拟背景。虽然不算纯 background，但可控性强：
div {
position: relative;
}
div::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url(bg.jpg);
background-size: auto 100%;
background-repeat: repeat-x;
z-index: -1;
}
注意点：
- 这里用
auto 100%保证高度撑满，宽度等比；repeat-x实现水平平铺 - 若要垂直平铺，换成
100% auto+repeat-y - 伪元素方案在 Safari 旧版本可能有渲染延迟，建议加
will-change: transform优化
真正难的不是写哪一行 CSS，而是分清“缩放策略”和“铺排策略”本就是两个正交维度——contain 管前者，repeat 管后者，强行混用只会触发规范里的降级逻辑。
