GOOCODE - Find your code/scripts

7 How to create a just simply and none requiring javascript and CSS property of background-attachment can be realized fixed page backgrounds and scrolling effect. We see that there are many project sites use parallax effect, parallax is generated by the dynamic changes and the background image and js script, but today we only need CSS.


HTML
HTML structure is very simple, a background image is fixed placement class .cd-fixed-bg div element for a class of .cd-scrolling-bg div element portion for scrolling. We can place multiple .cd-fixed-bg and .cd-scrolling-bg group.

<main> 
    <div class="cd-fixed-bg cd-bg-1"> 
        <h1><!-- title goes here --></h1> 
    </div>  
  
    <div class="cd-scrolling-bg cd-color-2"> 
        <div class="cd-container"> 
            <p> 
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi... 
            </p> 
        </div>  
    </div>  
    ...other divs... 
</main> 

CSS
How to achieve the background of fixed and scrolling effect? At first, I want to use jQuery, maybe I should make a div to a fixed location, and then change the background image when scrolling the page, but feel bad get. And simple we can do a few lines of CSS, set background background-size value to a fixed element of cover, background-attachment value is set to fixed, thus achieving a single page background fixed and scrolling effect. Consider the following code:

body, html, main { 
    /* important */ 
    height: 100%; 
} 
  
.cd-fixed-bg { 
    min-height: 100%; 
    background-size: cover; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-position: center center; 
} 
  
.cd-fixed-bg.cd-bg-1 { 
  background-image: url("../img/cd-background-1.jpg"); 
} 
.cd-fixed-bg.cd-bg-2 { 
  background-image: url("../img/cd-background-2.jpg"); 
} 
.cd-fixed-bg.cd-bg-3 { 
  background-image: url("../img/cd-background-3.jpg"); 
} 
 
  
.cd-scrolling-bg { 
    min-height: 100%; 
}