Pure CSS Parallax Background Images

Preview:

Description:

An extremely simple CSS solution to apply Parallax scrolling effects on your background images as you scroll down the webpage.

How to use it:

Create a set of containers for the parallax backgrounds.

<section class="module parallax parallax-1">
  <div class="container">
    <h1>Section 1</h1>
  </div>
</section>
<section class="module parallax parallax-2">
  <div class="container">
    <h1>Section 2</h1>
  </div>
</section>
<section class="module parallax parallax-3">
  <div class="container">
    <h1>Section 3</h1>
  </div>
</section>

Apply the Parallax scrolling effects on these containers using CSS background properties.

section.module.parallax {
  height: 600px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

Add the background images to the containers.

section.module.parallax-1 { background-image: url("1.jpg"); }
section.module.parallax-2 { background-image: url("2.jpg"); }
section.module.parallax-3 { background-image: url("3.jpg"); }