html - 如何使用适合页面的图像创建着陆 div，并有可能滚动到其他内容

Question

我正在尝试在我的 div 中制作一个图像作为该 div 的背景，以便它始终适合屏幕，像这样 http://richhaagenson.com/ .我在设置它时遇到问题，它要么设置为 position:absolute 然后就可以了，但是我不能在那个 div 下添加任何内容。我希望它像本网站一样覆盖整个页面，并且可以在滚动时在其下添加内容。到目前为止，这是我的代码

<section>
<div id="landing" class="landing-part">
<img src="images/background.jpg">
</div>
 </section>

<section>
<div id="about">About me bla bla bla bla bla</div>
</section>

我的 CSS

.landing-part img{  
width:100%;height:100%;position:relative;top:0;left:0;z-index:-5000;
}
#about{
width:400px;
height: 500px;
background-color: red;  
}

Answer 1

由于是着陆页，你可以使用css中的background-url和background-size属性分别选择你的图片目录并指定大小。

.landing-part {
    background: url(images/background.jpg);
    background-size: 800px 600px;
}

您可以改变尺寸并检查结果，直到它适合您的屏幕。