HTML本身不能设置背景图是否重复，必须用CSS的background-repeat: no-repeat；但仅写这一行大概率失效——90%的“不重复失败”源于路径错误、容器无尺寸或被其他样式覆盖。
直接说结论：HTML 本身不能设置背景图片是否重复，必须用 CSS 的 background-repeat: no-repeat，且仅写这一行大概率失效——90% 的“不重复失败”源于路径错、容器没尺寸、或被其他样式覆盖。
为什么写了 no-repeat 还是平铺？
浏览器默认行为就是 repeat，不显式声明 no-repeat 就等于平铺。但更常见的是这些“隐形问题”：
- 图片路径 404：比如 CSS 在
css/style.css里，却写了url("img/bg.jpg")，实际应为url("../img/bg.jpg") - 容器高度为 0：
body默认无高度，空页面下背景区域可能只有几像素高，图根本“展不开” - 被全局样式覆盖：例如项目用了 Normalize.css，或某处写了
* { background-repeat: repeat !important; } - 开发者工具里看到 computed styles 中
background-repeat是repeat，说明你的规则没生效，优先查这三项
background 简写时 no-repeat 必须紧贴 url() 后
简写属性顺序错，no-repeat 就会被忽略。正确写法只有一种核心结构：
background: url("bg.jpg") no-repeat center / cover;其中：
立即学习“前端免费学习笔记（深入）”；
-
url("bg.jpg")和no-repeat必须相邻，中间不能插center或其他值 -
/前只能是no-repeat（或repeat等）和定位值，不能把no-repeat拖到后面 - 错误示例：
background: url("bg.jpg") center no-repeat;—— 这里no-repeat被当成无效值丢弃
不重复 ≠ 自动居中，background-position 是刚需
只设 no-repeat，图片会死贴左上角。容器宽高远大于图片时，你会看到图孤零零在角落，其余全是空白或底色：
- 想居中显示：
background-position: center;或background-position: 50% 50%; - 想固定右下角：
background-position: right bottom; - 想偏移 20px：
background-position: 20px 20px;
注意：background-position 对 repeat 类型无效，但对 no-repeat 不是“可选”，是“必须配”。
容器没尺寸，no-repeat 白写
哪怕你把所有 CSS 都写对了，body 没高度，背景图就不可见。最简单可靠的解法：
- 加
min-height: 100vh;，确保至少占满视口 - 顺手清掉默认外边距：
margin: 0;，否则背景可能被挤出顶部 - 若需撑满整个文档（含滚动后内容），得双保险：
html { min-height: 100%; }+body { min-height: 100%; }
真正容易被忽略的点是：背景图是否渲染，完全取决于容器的**计算高度**，而不是 HTML 结构有没有内容——开开发者工具看 Computed 里的 height 和 min-height 值，比猜更准。
