背景图重复显示是因background-repeat默认为repeat，应改为no-repeat等值；需检查CSS简写覆盖、元素尺寸匹配、多层背景叠加及优先级冲突，并用开发者工具验证。
如果您将PSD设计稿切图后生成HTML5页面，发现背景图在网页中重复显示，通常是由于CSS中background-repeat属性默认值导致。以下是修改背景图平铺行为的具体操作步骤：
一、修改CSS中的background-repeat属性
background-repeat控制背景图像是否及如何重复。默认值为repeat，会使图像在水平和垂直方向均平铺。需将其更改为不重复或单向重复模式。
1、打开HTML文件关联的CSS样式表（如style.css）或
2、定位到设置背景图的CSS选择器，例如body、.header或自定义类名。
立即学习“前端免费学习笔记（深入）”；
3、在该选择器的声明块中，查找background或background-image相关语句。
4、添加或修改background-repeat属性，可选值包括：no-repeat（完全不重复）、repeat-x（仅水平重复）、repeat-y（仅垂直重复）。
5、保存CSS文件并刷新网页验证效果。
二、使用复合background简写属性重置
CSS background简写属性可一次性定义多个背景相关特性，若单独设置repeat未生效，可能是被简写规则覆盖，需统一声明。
1、确认当前背景定义是否使用了background简写，例如background: url(img/bg.jpg) #fff;
2、将该行替换为完整简写形式，明确包含repeat参数，例如：background: url(img/bg.jpg) no-repeat center top / cover #fff;
3、其中no-repeat即指定不重复，center top为定位，/ cover为尺寸缩放，#fff为备用背景色。
4、确保路径img/bg.jpg正确指向切图后的背景图文件。
三、检查HTML元素尺寸与背景图尺寸匹配关系
当容器宽高远大于背景图原始尺寸且repeat被禁用时，可能出现空白区域。此时需配合background-size与background-position精确控制显示范围。
1、在对应CSS选择器中添加background-size属性，常用值为cover（等比缩放填满容器）或contain（等比缩放完整显示全图）。
2、添加background-position属性，例如center center使图像居中对齐，或使用像素值如0 0固定左上角。
3、若需背景图随内容区拉伸变形显示，可设background-size为100% 100%，但注意可能失真。
4、删除所有影响盒模型的margin、padding异常值，防止容器尺寸意外扩大引发视觉错觉。
四、验证HTML结构中是否存在多层背景叠加
部分PSD切图流程会为不同div分别设置背景图，若父容器与子容器均含背景且未关闭重复，视觉上易误判为同一图层重复。
1、在浏览器中右键网页→“检查”打开开发者工具，切换至Elements面板。
2、逐级悬停查看各层级元素的Computed标签页中background-image和background-repeat实际计算值。
3、定位到真正触发重复渲染的元素，而非其父级或子级。
4、对该元素单独设置background-repeat: no-repeat并观察变化。
五、排除CSS优先级与继承干扰
外部样式表、内联样式或更高权重选择器可能覆盖本地repeat设置，导致修改无效。
1、在开发者工具的Styles面板中，查看目标元素的background-repeat属性旁是否有删除线，有则表示被覆盖。
2、尝试在该属性后添加!important临时验证，例如：background-repeat: no-repeat !important;
3、若加!important后生效，说明存在优先级冲突，需调整选择器 specificity 或移动样式位置。
4、检查是否引入了重置CSS（如normalize.css）或UI框架（如Bootstrap），其全局background规则可能产生影响。
