Here is the page I am trying to apply this full screen image to: http://www.alexwiley.co.uk/portfolio
I wish to make it so that the image displays 100% width and 100% height until you scroll down, then you can see the content below this as you scroll.
Here is an example site of what I am looking to do: http://www.nilsfrahm.com/
You can see his image is fullscreen until he scrolls.
I am making this website in Adobe Muse CC just as added information.
You need to use background-attachment: fixed; with background-image and background-size: cover;
Large screen version: 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>