背景图片不平铺主因是容器无高度、路径错误或样式被重置；必须显式声明background-repeat，注意路径基准、min-height设置及多层背景repeat对应关系。
背景图片不平铺，90%不是代码写错，而是容器没高度、路径错位或被重置样式覆盖。
background-repeat 必须显式写，别信“默认会平铺”
虽然 background-repeat: repeat 是默认值，但项目里常有全局重置（比如 * { background-repeat: no-repeat; }）或 CSS 框架（如 Normalize.css）悄悄改掉它。不写就等于裸奔。
- 始终显式声明：
background-repeat: repeat;（双向）、repeat-x;（仅横向）、repeat-y;（仅纵向） - 想做横向条纹？用
repeat-x后，必须给容器加min-height: 100vh;，否则只显示一行高，图就“没了” -
no-repeat和repeat不能混用在一个元素上——CSS 不支持“部分平铺”
路径和容器高度是两大高频失效点
控制台没报 404，图也不显示？大概率是路径相对于 CSS 文件位置错了，或者 body 高度为 0。
- CSS 写在
<style></style>标签里 → 路径以index.html所在目录为基准：url("img/bg.png") - CSS 在外部文件
css/style.css中 → 路径以style.css为基准：url("../img/bg.png") -
body默认无高度，空页面下背景区域实际是 0px 高 —— 加min-height: 100vh;+margin: 0;才稳 - 要覆盖整个文档（含滚动内容），得双保险：
html { min-height: 100%; }+body { min-height: 100%; }
background 简写时顺序和逗号不能错
想一行写完所有背景属性，顺序错了或逗号漏了，浏览器直接忽略整条规则。
- 正确顺序：
background: url("tile.png") repeat top left / auto;（image → repeat → position → / → size） - 错误示例：
background: url("tile.png") top left repeat;（repeat必须紧挨url()后） - 多层背景时，每个子项的
repeat值必须一一对应：background: url("a.png") repeat, url("b.png") repeat-y; - 用了
background-size: cover或100% 100%，平铺就自动失效——缩放和重复互斥
小图平铺前必须确认边缘对得上
无缝平铺不是 CSS 的责任，是图本身的事。接缝明显？不是代码问题，是设计源头没处理好。
- 用 Photoshop 或在线工具（如 Transparent Textures）导出真正可无缝拼接的 PNG
- 避免用 JPG 做平铺图——压缩伪影会在拼接处放大
- Safari 15.4 之前对
background-size+repeat组合有渲染 bug：只铺一次，然后拉伸填充 —— 如需兼容，优先用原图尺寸+repeat，别硬缩放
最易被忽略的其实是：平铺行为完全由渲染引擎决定，跟 HTML 结构无关。哪怕你给一个空 <div> 设了 <code>repeat，只要它没内容、没宽高、没 display: block，开发者工具里 computed 样式都可能不触发背景加载。
