How to Create Parallax Scrolling Effect only with small CSS/HTML

You must see parallax scrolling effect websites many times.

They are the websites with layers and effect followed by scroll.

Here is the easiest code of parallax scrolling effect.

CSS part

<style type="text/css">
html, body{
  margin:0;
  padding: 0;
}
#contents01{
   background-image: url(images/first-item1_pic.jpeg);  //Background image1
}
#contents02{
  background-image: url(images/preview.jpeg); //Background image2
}
#contents03{
   background-image: url(images/first-item3_pic.jpeg); //Background image3
}
.bgImage{
   width:100%;
   min-height: 800px;
   color:#fff;
   display:table;   //To avoid corrupting background image layouts
   background-position:center center;
   background-repeat: no-repeat;
  -webkit-background-size: cover;
   -moz-background-size:cover;
   -o-background-size:cover;
   background-size:cover;  //To fit images with window size without any space.
}
.bgImage > * {
   display:table-cell;
   vertical-align:middle;
   text-align:center;
   margin:0;
   padding: 0;
}
@media screen and (min-width: 768px) {
   .bgImage{
        background-attachment: fixed;
    }
}
</style>

HTML part

<body>
   <div class="bgImage" id="contents01">
      <p>My memories from precious trip</p>
   </div>
   <div class="bgImage" id="contents02">
      <p>We always need trips to discover where we have not seen.</p>
   </div>
   <div class="bgImage" id="contents03">
      <p>We feel very happy when we find something what we have not seen before.</p>
   </div>
</body>