How to Create: Parallax Scrolling

Learn how to create a 'parallax' scrolling effect using CSS.

Parallax Scrolling

Parallax scrolling is a web design trend where the background content (such as images) moves at a different speed than the foreground content when scrolling. Click the link below to see the difference between websites with and without parallax scrolling.

Demonstration with parallax scrolling effect

Demonstration without parallax scrolling effect

Note:Parallax scrolling is not always effective on mobile devices/smartphones. However, you can use media queries to turn off this effect on mobile devices (see the last example on this page).

How to create a parallax scrolling effect

Use a container element and add a background image with a specific height to it. Then, use background-attachment: fixed to create the actual parallax effect. Other background properties are used for centering and perfectly scaling the image:

examples in pixel units

<style>
.parallax {
  /* Image used */
  background-image: url("img_parallax.jpg");
  /* Set specific height */
  min-height: 500px;
  /* Create parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
/* Container element */
<div class="parallax"></div>

try it yourself

In the above example, the image height is set using pixels. If you want to use percentages, such as 100%, to make the image fit the entire screen, set the height of the parallax container to 100%. Note: You must also set height: 100% Applied to <html> and <body>:

examples in percentage units

body, html {
  height: 100%;
}
.parallax {
  /* Image used */
  background-image: url("img_parallax.jpg");
  /* Full height */
  height: 100%;
  /* Create parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

try it yourself

Some mobile devices use background-attachment: fixed may cause issues. However, you can use media queries to turn off the parallax effect on mobile devices:

example

/* Turn off parallax scrolling for all tablets and mobile phones. You can increase/decrease pixels if needed */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

try it yourself

In the above code, when the screen width is less than or equal to 1366 pixels, the parallax scrolling effect will be turned off, which is applicable to most tablets and mobile phones. This is achieved by changing .parallax of the background-attachment properties from fixed to scroll To implement. In this way, the background image will scroll with the rest of the page, rather than being fixed in the viewport.