页面缩放时如何适配背景图，避免缩小后出现重复显示问题

问题原因 #

背景图默认开启了平铺属性，同时你没有为html根元素设置高度，导致body的高度仅跟随内容高度计算，页面缩放后可视区域超出内容高度的部分就会重复加载背景图。

修复方案 #

修改你的CSS规则即可解决问题，调整后的完整代码如下：

/* 新增html根元素高度规则，保证body能继承到完整视口高度 */
html {
  height: 100%;
}

body { 
  background-image: url("Background.png");    
  /* 新增4条背景适配规则 */
  background-repeat: no-repeat; /* 禁止背景重复 */
  background-size: cover; /* 背景按比例缩放铺满整个容器 */
  background-position: center center; /* 背景始终居中显示 */
  background-attachment: fixed; /* 背景固定不跟随页面滚动，适配更多场景 */
  height: 100%;
  width: 100%;
  margin: 0; /* 清除body默认边距，避免出现边缘留白 */
}

.content {
  margin: 0 auto;
  position: relative;
  width: 500px;
  z-index: 999;
}

修改后不管你如何调整页面缩放比例，背景都会始终铺满整个屏幕，不会出现重复平铺的问题。

额外优化提示 #

你现有HTML代码中存在多余的</div>闭合标签，且<center>属于HTML已废弃的标签，后续迭代时建议用CSS布局（比如flex/grid）实现内容居中，兼容性和可维护性更好。

内容的提问来源于stack exchange，提问作者Shogery