如何創建兩個部分，一個是全屏幕圖像，另一個是頁面的其餘部分

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。