Magic with fixed CSS backgrounds.

Sup one & all I'm back again with a cool trick this time I found on some portfolio's, and well, those are listed here on this pages' post. So like always I don't waste much time and space and directly start the stuff to do.

HTML:

    <div class="thing"></div>
    <div class="thing"></div>
    <div class="thing"></div>
    <div class="thing"></div>

Yes. It's that simple. NO, NO! For the markup. The real thing lies in the CSS. These four divs will work as four different sections for our site. It's not compulsory to have strictly only four, coz ya' know, well ya' aren't a fool so I don't need to mention, do I?

CSS:

.thing {
  width: 100%;
  height: 100%;
  background-attachment: fixed;
  background-size:cover;
}

html, body
{
margin:0;
padding:0;
}

So by this, we defined the width and height of our main divs to stretch to the screen, removing the 'auto padding' in the body tag. The <b>background-size:cover;</b> tells the background images to be the size of the cover; that is, the screen. <b>background-color:white;</b> defines the white background for the alternate divs without the background. The <b>background-attachment:fixed; <b> syntax in .thing does the actual trick; letting the background stay still till it is completely scrolled by.

.thing:nth-child(1) {
    background-image: url(a.jpg);
}

.thing:nth-child(3) {
    background-image: url(b.jpg);
    height:50%;
}

Here, we get the first div with class 'thing' to have a cool background image of a spider net. It could be anything, a life moment, a cool picture of yours, or any texture too. In the 3rd div with 'thing' as class a classy picture of mother Earth. I've also set its width to 50% for a change. The 2nd and 4th divs are unchanged and have normal white background color. Try changing it to some different color, or even another background picture! It's just for that!

Example:

Download:

For you all to experience a full-screen effect, I've also made it available for download. Just download and unzip the file in a folder, and you will find a folder named 'Fixed Background', Open it and open the Index.html file. 

Download it here.