Last updated 21 April 2014. Created on 21 April 2014.
Edited by hatuhay. Log in to edit this page.

This tutorial uses jQuery Parallax to acchieve the parallax background effect.

Modules needed

Download and enable Parallax Background.


  • Define the element you want to apply the Parallax effect using any valid jQuery selector on the modules admin.
  • Additionally you need to define the inertia (relative speed) of the background and its horizontal position.
  • Depending on the position of your element, you need to apply some top-padding to align the background when entering viewport.

Loading the plugins

Download, rename and save both scripts on the module's /js directory.

They should look like this:

You could find both scripts here: jQuery Parallax on GitHub.

And thats it!!!

Looking for support? Visit the forums, or join #drupal-support in IRC.