Pure CSS Parallax Background Images

Category: Animation , CSS & CSS3 | November 15, 2014
Author: jamesv28
Views Total: 7,739
Official Page: Go to website
Last Update: November 15, 2014
License: MIT


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