Subscirbe to Kodhus news letter and get new tips and tutorials right in your inbox by entering your email below

Parallax effect

Parallax effect
Like & share to be notified of the new tips & tutorials:

Parallax effect

In this tutorial we are going to learn how to create a neat yet simple parallax effect using only css.
Please take a look at the demo and download the code to see how it looks.
Parallax effect, if used correctly, adds to the user experience of a website but if used too much, it will destroy it. So please be careful not to add too much animations and transitions in your pages.


Markup is so so simple.

You can see that we have put 2 divs to contain our background images that we want to have parallax effect on.


The trick is to use background-attachment: fixed.
Let’s take a look.

That’s it. Let us know if you have any questions in the comments.
There will soon be a tutorial on how to create really advanced parallax effects not only with background images but any element in the page. Stay tuned!