Pure CSS Parallax Background Images

Category: Animation , CSS & CSS3 | November 15, 2014
Views Total:18,639 views
Official Page:Go to website
Last Update:November 15, 2014


Pure CSS Parallax Background Images


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>
<section class="module parallax parallax-2">
  <div class="container">
    <h1>Section 2</h1>
<section class="module parallax parallax-3">
  <div class="container">
    <h1>Section 3</h1>

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"); }

You Might Be Interested In:

Leave a Reply