Parallax Background

This a simple module that allows to set a vertical Parallax effect on the background of any element on the DOM.

Installation

Download and enable Parallax Background Module.

From jQuery Parallax on GitHub download, rename and save jquery.scrollTo.js and jquery.parallax.js on the module's /js directory.

They should look like this:
parallax_bg/js/jquery.scrollTo.js
parallax_bg/js/jquery.parallax.js

Installation Drupal 8+

It already contains all js files inside the module folder, no need to download external packages.

Configuration

• Goto admin page in /admin/config/user-interface/parallax_bg (/admin/structure/parallax_element for Drupal 8+)
• Define the element you want to apply the Parallax effect using any valid jQuery selector. The selector should point to the element that holds the background, for example: #top-content, body.one-page #super-banner
• Additionally you need to define the inertia (relative speed) of the background and its horizontal position.

CSS Note

Depending on the position of your element, you need to apply some top-padding to align the background when entering viewport.

Plugins needed

This module uses the jQuery Parallax and jQuery.ScrollTo plugins.

Adding background images

Field Group Background