How to add Parallax to a Layout Background with the included Custom Template

This is a community-contributed tutorial. This tutorial is over a year old and may not apply to your version of Concrete CMS.
Dec 28, 2018

Preface

The ability to add a Parallax effect to a Layout Background Image has been included in Concrete CMS since release version 5.7.5, and is included in v8 onwards. This effect is rather easy to setup.

While this can be used in flexible, novel ways, this tutorial will not go into all ways this can be used. This tutorial will just cover a single example.

This demonstration will be on a fresh install of concrete (effectively version 8.4.3 as of this writing) on the Elemental theme, however the feature is not explicitly tied to the Elemental theme and can be used for other themes freely.

Execution

We're going to modify an existing Layout in the starter Elemental theme content.

Locate a Layout's Column, click on it to trigger the pull-down menu, and Click on "Edit Layout Design"

Next we set the desired background image. Click on the second from the left icon, to get the Background image interface. Then click on "Choose Image", pick the one you want, and we move onto the next step. You do not need to hit "Save" just yet.

Next we click on the Cog/Gear icon to the left of "Cancel" to bring up the Advanced menu. The top option, "Custom Template" will have "(None selected)" by default. Switch this to "Parallax". Then hit save.

Now you should be able to preview the background image and Parallax effect before you publish!

This method has some room for creative use. So if you discover a novel way to use this, please leave your findings in the comments below so others can benefit! :)

Recent Tutorials
Redirect all requests to HTTPS
Oct 9, 2024
By myq.

How to follow best practices for a secure web

Upgrade Concrete versions 9.3.1 and 9.3.2
Sep 10, 2024
By myq.

How to get past a bug in versions 9.3.1 and 9.3.2 that prevents upgrading the Concrete core through the Dashboard

How to use Composer with Marketplace extensions
Aug 22, 2024

Composer can be used to manage third-party extensions from the marketplace

Controlling Google Tag Manager Tags Based on Concrete CMS Edit Toolbar Visibility
Aug 13, 2024

This document provides a step-by-step guide on how to control the firing of Google Tag Manager (GTM) tags based on the visibility of the Concrete CMS edit toolbar. It explains how to create a custom JavaScript variable in GTM to detect whether the edit toolbar is present on a page and how to set up a trigger that ensures GTM tags only fire when the toolbar is not visible. This setup is particularly useful for developers and marketers who want to ensure that tracking and analytics tags are not activated during content editing sessions, thereby preserving the accuracy of data collected.

Upgrading Concrete from 8.5 to 9.x
Jun 21, 2024
By myq.

How to avoid problems upgrading from 8.5 to 9.x

How to change the default date format
May 30, 2024
By myq.

Change the format of the default date

Improvements?

Let us know by posting here.