中型标题效果 - 全屏标题

Question

我在越来越多的网站上看到这种效果，但仍然无法完全理解它是如何完成的。我使用了背景大小：覆盖在BODY或HTML元素上来创建全屏背景图像 - 但我希望能够创建一个全屏幕标题图像，它仍然在它下面有单独的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/