html - 我想全屏显示图像，直到滚动

这是我要将此全屏图像应用到的页面:
http://www.alexwiley.co.uk/portfolio

我希望这样做，以便图像显示100％的宽度和100％的高度，直到向下滚动为止，然后在滚动时可以看到其下方的内容。

这是我要做什么的示例网站:
http://www.nilsfrahm.com/

您可以看到他的图像是全屏的，直到他滚动为止。

我将在Adobe Muse CC中创建该网站，作为补充信息。

最佳答案

您需要使用背景附件:固定；带有background-image和background-size:封面；

大屏幕版本:http://codepen.io/suez/full/wulBv/

* {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  margin: 0;
}

html, body {
  height: 100%;
}

div {
  width: 100%;
  height: 100%;
}
div.first {
  background-image: url("http://i.imgur.com/PbV1Grl.jpg");
  background-attachment: fixed;
  background-size: cover;
}
div.second {
  background-image: url("http://i.imgur.com/VWYl1EC.jpg");
  background-size: cover;
}

<div class="first"></div>
<div class="second"></div>