1

我有一张背景图片，它覆盖了我的整个屏幕。但是，一旦我将元素添加到我的 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>

如果我使用背景尺寸：封面，它会显示相同。我该如何解决这个问题？

4

4 回答 4

1

我会固定包装器的位置，并添加这个 css：

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

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

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

于 2014-12-03T10:50:06.880 回答
0

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

于 2014-12-03T10:47:39.337 回答
0

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

向父母提及必要的高度。如果您希望整个页面都使用它，那么您可以为正文提供背景。

于 2014-12-03T10:56:49.233 回答
0

如果您希望背景图像填充容器，使用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%;
}

这也是我在自己的博客上使用的。

于 2014-12-03T10:56:50.493 回答