html - 背景图片只覆盖文字

Question

我想做的是:在页面顶部有一个带有链接和 Logo 的标题(可行)。然后在下面我想要一个占据屏幕其余部分的图像。现在，图片仅在我那里的文字后面。

这是我用于该部分的 HTML:

<div class="main">
        <div class="container">
            <h1>Title</h1>
            <h3>Subtitle</h3>
        </div>
</div>

这是 CSS:

.main{
    background-image:url('background1.jpg');
    background-repeat:no-repeat;
    background-size:cover;
}

.main h1{
    color:#ffffff;
}

.main h3{
    color:#ffffff;
}

Answer 1

一张背景图片只覆盖它所属元素的背景。你的 div main仅与其包含的内容一样大。背景被切断，因为 div 太大了。尝试将背景设置为body的背景:

body {
    background-image:url('background1.jpg');
}

这应该覆盖整个页面。 See this fiddle

为了理解我在上面的陈述中的意思，添加一堆 <br/> s 至 .main并观察背景图像如何随着 div 的大小扩展。

要利用这一点，您可以调整 div 的高度。要使其在不添加内容的情况下填满 100% 的屏幕，您需要添加以下内容:

html, body {
    height:100%;
}
.main {
    min-height:100%;
}

JSFiddle using 100% heights