中等風格的頭部效果 - 全屏頭

Question

我在越來越多的網站上看到了這種效果，但仍然無法完全理解它是如何完成的。我在body或HTML元素上使用了background-size：cover來創建全屏背景圖像 - 但我希望能夠創建一個全屏幕標題圖像，該圖像仍然具有單獨的div。

下面是一個例子： https://medium.com/race-class/b84d4011d17e

我已經試過了，但它只是使DIV幾個像素高，不覆蓋屏幕垂直100％：

.header { 
background: url(../images/header.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

Answer 1

試試這個：

html, 
body { 
    height: 100%; 
} 

.header { 
    height: inherit; 
} 

這裏有一個鏈接以查看它的jsfiddle：http://jsfiddle.net/8NdnP/