Clever Geek Handbook

I want to make the image full screen until I scroll

Here is the page where I am trying to apply this full screen image: http://www.alexwiley.co.uk/portfolio

I want to make the image display 100% width and 100% height until you scroll down, then you can see the content below that when you scroll.

Here is an example site of what I'm looking for: http://www.nilsfrahm.com/

You can see that his image is full screen until he scrolls.

I am making this site in Adobe Muse CC just like added information.

+3


source to share


2 answers


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>
Run codeHide result


+7


source


Try adding position: fixed

to a div that has a background.



0


source






More articles:


All Articles