Parallax Website Template

Posted onby admin

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

  1. Parallax Website Template Codepen

Parallax Website Templates Features Questions and Answers. What are the parallax effect website templates? Such themes come with the parallax effect module. It helps to achieve the 3D effect when far elements move slower than the closer ones. The included component is versatile and easy to use. It is optimized to avoid any performance issues. For corporate and agencies, the Exterior Design Responsive Parallax Website Template is a premium option providing parallax effect template with parallax responsive design and free parallax html template for responsive and attractive layouts.

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.

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

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

<style>
.parallax {
/* The image used */
background-image: url('img_parallax.jpg');
/* Set a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<!-- Container element -->
<div></div>
Try it Yourself »

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, set the height of the parallax container to 100%. Note: You must also apply height: 100% to both <html> and <body>:

Example with percent

body, html {
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;
}
Try it Yourself »

Some mobile devices have a problem with background-attachment: fixed. However, you can use media queries to turn off the parallax effect for mobile devices:

Example

Parallax Website Template
/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if needed */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
Try it Yourself »

Parallax Website Template Codepen