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

Question

我正在尝试在我的div中制作一个图像作为该div的背景，以便它始终适合屏幕，就像这样 http://richhaagenson.com/。我在设置它时遇到问题，它要么设置为位置：绝对，然后就可以了，但我无法在该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;
}

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