我有一张覆盖整个屏幕的背景图片。然而,一旦我将元素添加到我的 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,它会显示相同的内容。 我该如何解决这个问题?
最佳答案
我会固定包装器的位置,并添加此 css:
#backgroundLanding {
position:fixed:
top:0;
right:0;
bottom:0;
left:0;
background-size:cover;
}
但这意味着内容永远不会滚动。但我相信这是预期的效果。
此外,即使新内容动态添加到文档中,它也会始终填满屏幕。
关于html - 背景覆盖整个屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27269624/