Html 仅覆盖文本的背景图像

我想做的是：在页面顶部有一个带有链接和徽标的标题（这很有效）。然后在下面我想有一个图像，占据了屏幕的其余部分。现在，图像只在我的文本后面

以下是我在该部分使用的HTML：

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

---

您需要将.main的高度设置为100%。您可能还需要将身体高度设置为100%

尝试：

---

背景图像仅覆盖其所属元素的背景。您的div

main

仅与它包含的内容一样大。背景被切断，因为div只有这么大。尝试将背景设置为

正文的背景

：

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

这应该涵盖整页

要了解我在上面的陈述中的意思，请在

.main

中添加一堆

s，并观察背景图像如何随着div的大小而扩展

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

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

---

谢谢，这很有道理。我感谢你抽出时间回答@用户3622465没问题，很高兴我能帮忙。如果这解决了您的问题，请检查此答案作为正确的解决方案：）

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

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