html - 如何调整背景图像以适应屏幕大小

Question

我试图让背景图像覆盖整个屏幕的宽度和高度，但我似乎无法正确调整高度。

我正在关注 these实现它的技巧，但我没有做对。它与内部 div 内容一样高。

这是html和css，你可以在jsfiddle中看到它还有:

HTML:

<div class="navbar"></div>
<div class="background-container">
    <div class="bg">
        <div class="container">
            JOIN US!
        </div>
    </div>
</div>

CSS:

.navbar {
    height: 50px;
}

.container {
    text-align: center;
    padding: 10px;
    color: #fff;
}

.bg {
    height: 100%;
    background: url(https://images.unsplash.com/photo-1431578500526-4d9613015464?q=80&fm=jpg&s=169b4f4e6f3882a03b6b93b2e6848052) no-repeat center center fixed;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Answer 1

默认情况下，正文标签不是全高的。您需要指定它。

html, body {
    height: 100%;
}

Demo

要防止产生滚动，请同时删除边距和填充。

Demo 2