如何设置HTML页面背景图片及其平铺定位技巧详解？

本文共计870个文字，预计阅读时间需要4分钟。

背景图片不平齐，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> 标签里 → 路径以 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> 设了 repeat，只要它没内容、没宽高、没 display: block，开发者工具里 computed 样式都可能不触发背景加载。