CSS背景图片无法填充空白？移动端适配问题解决方案咨询

你的问题出在绝对定位伪元素的高度设置上：height: 100%是相对于父元素.app的高度，若.app未足够撑满页面内容（比如仅等于初始视口高度），当移动端页面内容超过视口高度时，伪元素只会覆盖到视口底部，滚动后下方就会出现空白。

可以通过以下两种方式解决：

方式一：让背景跟随页面内容延伸 #

适合需要背景和内容同步滚动的场景：

1. 给父元素.app添加基础样式，确保它能撑满视口且随内容高度变化：

.app {
  position: relative; /* 为绝对定位的伪元素提供定位基准 */
  min-height: 100vh; /* 至少覆盖整个视口高度 */
}

2. 伪元素样式保持不变即可，此时height: 100%会跟随.app的实际高度自动延伸：

.app::before {
  content: '';
  background: url('./assets/backgroundImg.jpg') no-repeat center center/cover;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

方式二：让背景固定覆盖整个视口 #

若希望背景固定不动，无论页面滚动都始终覆盖屏幕，可修改伪元素的定位方式：

.app::before {
  content: '';
  background: url('./assets/backgroundImg.jpg') no-repeat center center/cover;
  position: fixed; /* 固定定位，相对于视口 */
  width: 100vw; /* 覆盖视口宽度 */
  height: 100vh; /* 覆盖视口高度 */
  top: 0;
  left: 0;
  z-index: -1;
}

这种方式无需给.app额外设置样式，背景会始终固定在视口，不会出现滚动后的空白。

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