html背景图平铺需显式声明background-repeat并确保容器有高度、路径正确；repeat双向平铺，repeat-x仅横向，repeat-y仅纵向，no-repeat需配合position和min-height使用。
HTML 本身不直接设置背景图，所有控制都靠 CSS。关键不是“写不写”，而是 是否显式声明 background-repeat，以及是否配套处理容器尺寸、路径和定位。
让图片平铺（重复显示）
平铺靠 background-repeat，但只写这个还不够——元素得有“地方”可铺。
-
双向平铺（最常用）：用
background-repeat: repeat;，图像在水平和垂直方向无限复制 -
仅横向平铺：用
background-repeat: repeat-x;，适合条纹、横幅类小图；注意加min-height: 100vh;，否则可能只显示一行高 -
仅纵向平铺：用
background-repeat: repeat-y;，适合侧边纹理；确保图像宽度适配容器，太宽会被截断 -
必须给容器设高度：
body默认高度为 0，空页面下背景区域实际不可见；推荐加min-height: 100vh;和margin: 0; -
路径要对：CSS 写在
<style></style>里，路径以 HTML 文件为基准；CSS 在外部文件中，路径以该 CSS 文件位置为基准
让图片不重复（只显示一次）
很多人以为只要写了 background-image 就自动单张显示，其实浏览器默认就是 repeat，不写 background-repeat 就等于平铺。
-
必须显式写
no-repeat：例如background-repeat: no-repeat;或简写中包含它 -
搭配
background-position：设了no-repeat后，图片默认贴左上角；想居中就加center center，想右下就加right bottom -
控制大小很重要：单张图常需缩放，
background-size: cover;填满且裁剪，contain完整显示但可能留白，100% 100%拉伸易失真 -
别漏掉容器高度：若只设
no-repeat却没设min-height，body 高度仍可能为 0，图根本看不见
用简写属性一步到位
推荐用 background 简写，避免遗漏关键项，顺序不能错：
- 正确写法：
background: url("bg.jpg") no-repeat center / cover #fff; - 各部分含义：图片 → 是否重复 → 定位 → 斜杠 → 缩放 → 备用色
- 错误示例：
background: url("bg.jpg") center no-repeat;——no-repeat必须紧跟在url()后面，否则被忽略 - 多层背景时，每个图的
repeat值必须一一对应，用逗号分隔
常见失效原因排查
写了 repeat 却不平铺，或写了 no-repeat 却还在重复，大概率是这几个地方出了问题：
- 全局样式重置（比如
* { background-repeat: no-repeat; }）悄悄覆盖了你的设置 - CSS 框架（如 Normalize.css）修改了默认行为
- 开发者工具里看
Computed值，确认最终生效的是哪个background-repeat - 图片路径 404，或容器宽高为 0（尤其
body或div没内容时） - 用了
background-size: cover或100% 100%，会自动禁用平铺——缩放与重复互斥
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
