background-repeat: repeat 不生效的主因是路径错误、容器无高度或样式被覆盖；需检查 css 文件中图片路径基准、设置 min-height 保证容器有尺寸、排查全局重置样式或简写遗漏。
写了 background-repeat: repeat; 却不平铺，基本不是语法写错，而是路径、容器高度或样式覆盖这三件事没对上。
为什么 background-repeat: repeat 不生效
浏览器确实默认就是 repeat，但项目里几乎必然存在干扰：
- 全局重置样式（比如
* { background-repeat: no-repeat; }）直接干掉你的声明 - CSS 框架（如 Normalize.css）悄悄改了
body的背景行为 -
background简写漏写了repeat，例如background: url("bg.png") top left;—— 这等价于no-repeat - 开发者工具里 computed 值显示
repeat，但图根本没加载：先去 Network 面板看background-image路径是不是 404
路径必须相对于 CSS 文件位置
路径不是以 HTML 文件为基准，而是以当前 CSS 所在位置为起点：
- CSS 写在
<style></style>标签里（即在index.html中）→ 路径以 HTML 所在目录为准：url("img/tile.png") - CSS 在外部文件
css/style.css中 → 路径以该 CSS 文件为基准：url("../img/tile.png") - 绝对路径或
file://开头的本地路径会被浏览器拒绝，一律不用
body 没高度，平铺就等于没写
body 默认没有高度，空页面下背景区域实际是 0px 高，图再重复也看不见：
- 加
min-height: 100vh;+margin: 0;是最简可靠的起步配置 - 若要覆盖整个文档（含滚动后的内容），得双保险：
html { min-height: 100%; }+body { min-height: 100%; margin: 0; } - 用
repeat-x时，记得给容器设min-height，否则只显示一行高；repeat-y同理要管宽度
background-size 和 repeat 是互斥的
一旦用了 background-size: cover 或 100% 100%，平铺就自动失效 —— 缩放和重复不能共存：
- 想平铺，就别碰
background-size，或者只用auto（默认值） - 小图平铺前务必确认边缘能自然衔接，接缝明显不是 CSS 的锅，是图本身没做好
- 多层背景时，每张图的
repeat值必须一一对应：background: url("a.png") repeat, url("b.png") repeat-y;
最容易被忽略的是：路径基准点、容器真实高度、以及重置样式对 background-repeat 的静默覆盖 —— 这三处不动，光调属性毫无意义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
