How TO - Parallax Scrolling
Learn how to create a "parallax" scrolling effect with CSS.
Parallax
Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling. Click on the links below to see the difference between a website with and without parallax scrolling.
Demo without parallax scrolling
Note: Parallax scrolling does not always work on mobile devices/smart phones.
How To Create a Parallax Scrolling Effect
Use a container element and add a background image to the container with a specific height. Then use
the background-attachment: fixed to create the actual parallax
effect. The other background properties are used to center and scale the image
perfectly:
Example with pixels
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Set a specific height */
height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<!-- Container element -->
<div class="parallax"></div>
The example above used pixels to set the height of the image. If you want to
use percent, for example 100%, to make the image fit the whole screen, you must
apply height: 100% to both <html> and <body>:
Example with percent
height: 100%;
}
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
