SOURCE

<!-- Four containers for setting the background images -->
<div class="parallax">
  <div class="bg__foo">foo</div>
  <div class="bg__bar">bar</div>
  <div class="bg__baz">baz</div>
  <div class="bg__bazz">bazz</div>
</div>

[class*="bg__"] {
  height: 50vh;
  /* fix background */
  background-attachment: fixed;
  /* Scale it nicely to the element */
  background-size: cover;
}

.bg__foo {
  background-image: url(
    http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax1.jpg
  );
}

.bg__bar {
  background-image: url(
    http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax2.jpg
  );
}

.bg__baz {
  background-image: url(
    http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax3.jpg
  );
}

.bg__bazz {
  height: 100vh;

  background-image: url(
    http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax1.jpg
  );
}