嗨，这个问题我之前也踩过坑！其实核心原因是position: absolute的定位特性——它是相对于最近的定位父元素来确定自身尺寸的，当页面内容高度超过视口后，absolute元素并不会自动跟着内容的高度延伸，所以滚动后底部就没背景了。给你几个实用的解决办法：

方案一：改用position: fixed（最推荐） #

直接把背景元素的定位改成fixed，它会相对于浏览器视口固定定位，不管页面怎么滚动，都会始终覆盖整个视口区域，完美解决滚动后背景缺失的问题。

代码示例：

.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw; /* 占满视口宽度 */
  height: 100vh; /* 占满视口高度 */
  background-image: url('你的图片地址');
  background-size: cover;
  z-index: -1; /* 把背景放在所有内容下面 */
}

这个方案操作最简单，适配绝大多数场景，不用纠结内容高度的问题。

方案二：给父元素设置高度+背景元素用min-height: 100vh #

如果你的场景不适合用fixed（比如需要背景跟着内容一起滚动），可以试试这个方法：

1. 先给html和body设置高度，并让body成为定位父元素：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative; /* 让背景元素相对于body定位 */
}

2. 然后调整背景元素的样式：

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh; /* 确保至少覆盖视口高度，内容超出时自动延伸 */
  background-image: url('你的图片地址');
  background-size: cover;
  z-index: -1;
}

这里的min-height: 100vh是关键，它会让背景元素至少和视口一样高，当内容撑开body的高度后，背景也会跟着延伸。

方案三：直接给body设置背景（最简洁） #

如果不想额外添加背景容器div，直接给body设置背景也能解决问题：

body {
  background-image: url('你的图片地址');
  background-size: cover;
  background-attachment: fixed; /* 让背景固定在视口，滚动内容时背景不动 */
  margin: 0;
  padding-top: 80px; /* 替换成你的导航栏高度，避免内容被固定导航栏遮挡 */
}

这个方案省去了额外的DOM元素，background-attachment: fixed能保证背景始终覆盖视口区域，同时记得给body加padding-top避开固定导航栏的遮挡。

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