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

Modules needed

Download and enable Parallax Background.

Configuration:

  • 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:
parallax_bg/js/jquery.scrollTo.js
parallax_bg/js/jquery.parallax.js

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

And thats it!!!