如何设置背景图覆盖整个页面且滚动时不重复显示

问题根因 #

• background-repeat默认值为repeat，背景图尺寸小于容器时会自动横向、纵向平铺
• 原有background-size: 100% auto仅适配宽度，高度按原图比例自适应，当页面内容高度超过视口高度时，.App容器实际高度会大于100vh，背景图高度小于容器高度就会触发重复填充

修复后完整代码 #

.App {
  text-align: center;  
  background-image: url('./colorful-bg.png');  
  /* 禁止背景重复 */
  background-repeat: no-repeat;
  /* 背景等比例缩放完全覆盖整个容器，无空白区域，超出部分自动裁剪 */
  background-size: cover;
  /* 背景居中对齐，避免内容偏移时背景显示不全 */
  background-position: center center;
  /* 可选配置：背景固定在视口，页面滚动时背景不跟随移动 */
  /* background-attachment: fixed; */
  min-height: 100vh;  
}

可选调整说明 #

• 如果不需要保持背景图比例，希望背景完全贴合容器宽高，可以将background-size改为100% 100%，该配置可能导致背景图拉伸变形
• 如果希望滚动页面时背景固定不跟随内容移动，取消background-attachment: fixed的注释即可

内容的提问来源于stack exchange，提问作者Qatr El-Nada