背景覆盖整个屏幕

问题描述：

我有一个背景图像，涵盖了我的整个屏幕。但是，一旦我将元素添加到我的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，它会显示相同。我该如何解决这个问题？

你有什么小提琴演示？ – 2014-12-03 10:46:08

background-size：100％100％ – aashi 2014-12-03 10:46:10

答

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

我知道你的意思。所以背景覆盖整个屏幕。但是html文档只能看到元素所在的部分，下面没有。所以我没有机会修复屏幕底部的任何内容？ – Dribel 2014-12-03 10:53:01

@ user3383709确实可以。我已经更新了我的答案。 – Leo 2014-12-03 11:10:50

答

我会做固定包装的位置，并添加此css：

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

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

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

答

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

提到父母的必要高度。如果你想要它整个页面，那么你可以给背景的身体。

答

如果你想要背景图像填充容器，使用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使用。

背景覆盖整个屏幕

相关推荐