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;
}

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

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

Answer 2

问题不在于您的背景图片，您应该检查主包装的宽度并将其设置为100％以适合任何屏幕尺寸

Answer 3

如果您没有明确提及，父Div的高度取决于其子元素。这就是为什么你会看到基于子元素的背景。

提及父母所需的身高。如果您想要整个页面，那么您可以将背景赋予身体。

Answer 4

如果您希望背景图片填充容器，请使用background-size: cover;来获取容器，图像仍然保持其分辨率。

但是，看起来您的问题是容器未适应浏览器窗口。它将由其子节点进行拉伸。

@lharby给出了一个解决方案。另一种解决方案是这样的：

html, body {height: 100%;} /* I assume #backgroundLanding is a child node of <body> */
#backgroundLanding {
  background-image: url('/assets/images/landing_new4.jpg'); 
  background-size: cover;
  height: 100%;
}

这也是我在my own blog上使用的内容。

覆盖整个屏幕的背景

4 个答案: