背景覆盖整个屏幕
[英]Background to cover entire screen
问题描述
我的背景图片覆盖了我的整个屏幕。 但是，一旦我将元素添加到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，它将显示相同的内容。 我该如何解决？
4 个解决方案
解决方案1
1 2014-12-03 10:50:06
我将使包装器的位置固定，并添加以下CSS：
#backgroundLanding {
position:fixed:
top:0;
right:0;
bottom:0;
left:0;
background-size:cover;
}
但这意味着内容永远不会滚动。 但我相信这是理想的效果。
另外，即使将新内容动态添加到文档中，它也始终会填满屏幕。
解决方案2
0 已采纳 2014-12-03 10:47:39
问题不在于背景图片，您应该检查主包装纸的宽度并将其设置为100％以适合任何屏幕尺寸
解决方案3
0 2014-12-03 10:56:49
如果您没有明确提及，则父Div的高度取决于其子元素。 这就是为什么您看到基于child元素的背景的原因。
向父母提及必要的身高。 如果整个页面都需要它，则可以为正文提供背景。
解决方案4
0 2014-12-03 10:56:50
如果希望背景图像填充容器，请使用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%;
}
这也是我在自己的博客上使用的内容 。
使用 CSS 中的背景大小覆盖属性来覆盖整个可用屏幕大小而无需左右滚动
[英]Using Background size cover property in the CSS to cover the entire available screen size without scroll left-right
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.