CSS为body设置可缩放背景图 解决不重复时的空白问题

问题复现 #

当前使用的CSS代码如下，添加background-repeat: no-repeat后局部区域出现白色空白：

body {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Coffee_and_Friends_%28Unsplash%29.jpg/2560px-Coffee_and_Friends_%28Unsplash%29.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

使用的目标背景图参考：

问题根因 #

白色空白和background-repeat属性没有直接关系，核心诱因是两点：

• 浏览器默认给html、body元素预置了8px外边距，直接在视口边缘形成白边
• html、body元素默认高度由内部内容撑开，当视口高度大于页面实际内容高度时，body不会自动铺满整个视口，未被body覆盖的区域会直接露出html元素的默认白色背景

修复代码 #

直接替换原有样式即可，单张背景图可完美铺满整个视口，无空白无重复：

/* 清除浏览器默认内外边距，避免边缘白边 */
* {
  margin: 0;
  padding: 0;
}

/* 给html根元素设置100%高度，作为body高度的参照基准 */
html {
  height: 100%;
}

body {
  /* 保证body最小高度和视口一致，内容超出时自动延展不会被截断 */
  min-height: 100%;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Coffee_and_Friends_%28Unsplash%29.jpg/2560px-Coffee_and_Friends_%28Unsplash%29.jpg");
  /* 背景图等比缩放覆盖整个元素区域 */
  background-size: cover;
  /* 禁止背景重复平铺 */
  background-repeat: no-repeat;
  /* 背景居中显示，避免窗口与图片比例不匹配时关键内容被裁剪 */
  background-position: center center;
}

可选优化 #

如果需要页面滚动时背景图固定在视口、不随内容滚动，可以给body添加属性实现固定视差效果：

background-attachment: fixed;

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