Question

我要做的是以下内容：在页面顶部有一个标题，其中包含链接和徽标（这是有效的）。然后在下面我想要一个占据屏幕其余部分的图像。现在，图像仅在我所拥有的文本后面。

以下是我在该部分使用的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/>添加一堆.main，并观看背景图片如何随着div的大小展开。

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

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

JSFiddle using 100% heights

Answer 2

您需要将.main的高度设置为100％。您可能还需要将body的高度设置为100％。

尝试：

body {
    height: 100%;
}

.main {
    height: 100%;
}

仅覆盖文本的背景图像

2 个答案: