html - 背景覆盖整个屏幕

Question

我有一张覆盖整个屏幕的背景图片。然而，一旦我将元素添加到我的 html 文件中，背景图像只覆盖这个新元素的区域，其余部分将是白色的。

我如何确保背景在我的元素之后一直持续到屏幕底部？

#backgroundLanding {
  background: url('/assets/images/landing_new4.jpg'); 
  background-size: auto;
  background-position: center center;
  background-attachment: fixed;
  top: 0;
}

<div id="backgroundLanding" >


  <div>
  <!--Flight Search Directive-->
  <!--flight-search>
  </div>


    <!--impressum></impressum-->
  </div>
</div>

如果我使用 background-size:cover，它会显示相同的内容。我该如何解决这个问题？

Answer 1

我会固定包装器的位置，并添加此 css:

#backgroundLanding {
   position:fixed:
   top:0;
   right:0;
   bottom:0;
   left:0;
   background-size:cover;
}

但这意味着内容永远不会滚动。但我相信这是预期的效果。

此外，即使新内容动态添加到文档中，它也会始终填满屏幕。