Hello Readers!

Have you ever looked out of a car window while driving and noticed how fast the electricity poles move by, while the mountains in the background move really slowly. This is what we say, parallax motion, in real.

For a long time, in websites development,  "parallax" effect has been getting really popular. This effect leads to a nice visual effect.

Parallax motion, or  parallax scrolling, gives us an illusion of two objects in the same line of sight but moving at different speeds. Parallax scrolling causes the content to scroll normally, but the background remains stationary. The beauty of this technique is that it only requires standard CSS.

In other words, background content (i.e. an image) and the foreground content move at different speeds. To get this effect, background images need to be placed on different elements.

To achieve this effect, there are 3 properties we need to mention :

• Background Attachment
• Background Size
• Background Position

Let us see how the three of these help.

The initial value of the background-attachment property is scroll.  It means that when the user scrolls, all the elements are moving up and down together (so does the background image). We all know about this behaviour. What makes it interesting is setting the background-attachment to fixed. fixed defines that the background image position is fixed to the viewport. This implies that the background image will stay at the same position, no matter how much scrolling be done. This creates the actual parallax effect. This might look good on desktops, but will not function on mobile devices.

The background-size property is set it to cover. This forces the background image to occupy all the available space by expanding proportionally (aspect ratio).

The background-position property is set to center.

Browser support for this is great. IE8 and down will not support.

A sample code is provided below for you to try this.

HTML :

<!-- Container element -->
<div class="parallax"></div>

CSS :

.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-size: cover;
}

CSS makes life easy for us :)