html - 如何创建两个部分，一个带有全屏图像，另一个带有页面的其余部分

Question

我正在尝试创建一个包含两个部分的页面。第一部分将以图像作为背景填充整个屏幕，第二部分是用户可以滚动到或单击要滚动到的按钮，具有文本类似于下图(一个接一个地显示两页)或者喜欢 dropbox website

我当前的代码是，但这不起作用

  <section  Style="margin-top:0px;
    text-align: center;
    background-color: #000008;
    background-image: url(/assets/highway4.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,.5);
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,.5);
  box-shadow: 0 3px 3px rgba(0,0,0,.5);
  height: 1000px;
  width: 1500px"></section>
<section>
the login form code
</section>

我也读过这个post但它没有用。无效我的意思是:目前我用像素强制高度和宽度，这在所有计算机屏幕上看起来都不一样。所以我试图让它缩放该部分以全屏显示每个屏幕尺寸

Answer 1

要全屏显示图片和表格，必须先给

html, body {
    height: 100%;
}

然后你可以给图像height: 90% 并为表单保留其余部分

.top-image {
    background-image: url(http://lorempixel.com/1500/1000);
    height: 90%;
    width: 100%;
}

参见示例 JSFiddle

如果您想要全屏图像，请将 height: 100% 赋给 div。