必须显式写 background-repeat: no-repeat 才能关闭平铺，否则默认 repeat；还需确保元素有尺寸、配合 background-position 定位，并按正确顺序在 background 简写中声明。

background-repeat: no-repeat 必须显式写

浏览器默认就是 background-repeat: repeat，哪怕你只写了 background-image，图也会平铺。不写 no-repeat 就等于没关平铺。

常见错误是以为“设了图就自动单张显示”，结果调试半天发现只是规则没生效。

• 必须写 background-repeat: no-repeat，不能依赖默认行为
• 如果项目用了 Normalize.css 或全局重置（比如 * { background-repeat: no-repeat; }），反而可能让本该平铺的区域意外锁死——这时要针对性覆盖，而不是删重置
• 用开发者工具看 Computed 样式，确认最终生效的 background-repeat 值是不是 no-repeat

元素没尺寸，no-repeat 也白搭

背景图再怎么设 no-repeat，如果容器本身高度为 0 或宽度塌陷，图就无处可展。尤其常见于空 <div>、按钮没设宽高、或父级未撑开。<ul> <li>给元素明确设 <code>width 和 height，或至少 min-height: 100vh（对全屏背景）

按钮类元素常因内容短 + padding: 0 导致高度不足，建议加 min-height: 36px 或类似兜底值

用 DevTools 的 Elements 面板检查该元素的 Actual Height/Width，别只信 CSS 规则里写了 height

background-position 是 no-repeat 的搭档，不是可选

no-repeat 后图片默认贴左上角。如果元素比图大很多，你会看到图缩在角落，其余全是空白或背景色——这不是失效，是定位没调。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 居中显示：加 background-position: center 或 background-position: 50% 50%
• 右下角固定：用 background-position: right bottom
• 微调偏移：如 background-position: 20px 10px 表示距左 20px、距上 10px
• 注意：background-position 对 repeat 类型无效，但对 no-repeat 是刚需

简写 background 时顺序错了，no-repeat 就被忽略

用 background 一行写完最省事，但顺序错一点，no-repeat 就不生效。CSS 解析时会把位置参数误认为是重复方式，直接跳过。

• 正确顺序：background: url("bg.jpg") no-repeat center / cover;
• 错误写法：background: url("bg.jpg") center no-repeat; —— no-repeat 没紧跟 url() 后，会被忽略
• 斜杠 / 前只能是 no-repeat、repeat-x 等重复值；斜杠后才是 cover、contain 等缩放值
• 多层背景时，每个图的 no-repeat 必须和对应 url() 一一匹配，用逗号分隔

路径 404 和样式覆盖是静默失效的主因，光盯 no-repeat 不解决问题。真正起效前，先确认图加载成功、容器有空间、定位已指定、简写没写错位置。