I want to make an image fullscreen until I scroll

Question

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.

I think you can try with possition: fixed of a div that has that background; — Florin Pop, Sep 18 '14 at 18:22

score 10 · Accepted Answer · answered Sep 18 '14 at 18:25

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>

score 0 · Answer 2 · answered Sep 18 '14 at 18:22

0

Try adding position: fixed to the div that has the background.

answered Sep 18 '14 at 18:22

Nischaal Cooray

210
2
12

I want to make an image fullscreen until I scroll

2 Answers2

Linked