滚动时背景图片无法填充整个body的问题求助

当调整页面尺寸查看小屏幕显示效果时，背景图片仅填充body的视口高度，容器剩余区域仅显示背景色。在devtools中查看Nest Hub的显示效果时，该问题最为明显。如何解决此问题，让背景图片在页面滚动时能够填充整个区域或实现重复显示？

示例代码 #

HTML #

<body>
  <header>
   <h1>RANDOM TEXT</h1>
   <h1>MORE RANDOM TEXT</h1>
  <header>
    <main class="contact-main">
      <section class="contact-section">
        <h2>CONTACT US</h2>
        <p>Random text here Random text here Random text here</p>
        <p>Random text here Random text here Random text here</p>
      </section>
      <img src="https://i.imgur.com/g6xj3zE.jpg">
    </main>
</body>

CSS #

html {
  box-sizing: border-box;
  font-size: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  font-family: "League Spartan", sans-serif;
  font-weight: 700;
  color: #fff;
  text-align: center;
  background-color: #1B191A;
  position: relative;
  display: flex;
  justify-content: center;
}

body::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("https://i.imgur.com/TJA3v8q.jpg") no-repeat center/cover;
  z-index: -1;
  opacity: 0.4;
}


.contact-main {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.contact-section {
  -moz-text-align-last: left;
  text-align-last: left;
  margin: 3rem;
  font-weight: 500;
  font-size: 1.3rem;
}

@media (max-width: 69.375em) {
  .contact-section {
    margin: 1rem;
    margin-top: 2rem;
  }
}

@media (max-width: 34.375em) {
  .contact-section {
    font-size: 0.9rem;
  }
}

@media (max-width: 21.875em) {
  .contact-section {
    font-size: 0.6rem;
    margin: 0.4rem;
  }
}

.contact-section h2 {
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 1.5rem;
}

@media (max-width: 34.375em) {
  .contact-section h2 {
    font-size: 1.2rem;
  }
}

.contact-section button {
  font-family: inherit;
  padding: 0.5rem 1rem;
  margin-top: 1.5rem;
  letter-spacing: 0.15em;
  color: #CCAB5B;
  background: none;
  border: 2px solid #CCAB5B;
  font-size: 1rem;
  cursor: pointer;
}

.contact-section button:hover {
  background-color: #CCAB5B;
  color: #000;
}

@media (max-width: 34.375em) {
  .contact-section button {
    font-size: 0.7rem;
  }
}

@media (max-width: 21.875em) {
  .contact-section button {
    font-size: 0.5rem;
    padding: 0.3rem 0.8rem;
  }
}


img {
  border-radius: 50%;
  margin-top: 3rem;
  border: 3px solid #CCAB5B;
  width: 30rem;
}

@media (max-width: 69.375em) {
  img {
    position: absolute;
    top: 80%;
    width: 20rem;
  }
}

@media (max-width: 34.375em) {
  img {
    width: 12rem;
  }
}

解决方案 #

问题根源是body::before伪元素设置了height:100%，而body仅用min-height:100vh定义最小高度。当页面内容高度超过视口时，伪元素高度不会跟随body的实际高度延伸，导致滚动后露出背景色。以下是两种可行的修复方案：

方案一：修正伪元素的定位与高度 #

将伪元素改为固定定位，确保它始终覆盖整个视口，滚动时也不会失效：

body::before {
  content: "";
  position: fixed; /* 固定定位，脱离文档流 */
  width: 100%;
  height: 100vh; /* 用视口高度代替百分比，确保覆盖全屏 */
  background: url("https://i.imgur.com/TJA3v8q.jpg") no-repeat center/cover;
  z-index: -1;
  opacity: 0.4;
}

如果需要背景随内容滚动而延伸，可保留绝对定位，但确保body的高度被内容撑开：

body {
  min-height: 100vh;
  position: relative;
}
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* 此时100%对应body的实际高度 */
  background: url("https://i.imgur.com/TJA3v8q.jpg") no-repeat center/cover;
  z-index: -1;
  opacity: 0.4;
}

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

去掉伪元素，直接将背景样式写在body上，背景会自动覆盖body的全部高度：

body {
  min-height: 100vh;
  font-family: "League Spartan", sans-serif;
  font-weight: 700;
  color: #fff;
  text-align: center;
  background-color: #1B191A;
  background-image: url("https://i.imgur.com/TJA3v8q.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed; /* 可选：固定背景不随滚动移动 */
  position: relative;
  display: flex;
  justify-content: center;
  background-blend-mode: overlay; /* 实现背景透明度效果 */
}

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