1. Home
  2. Docs
  3. Lagoon
  4. Pages Elements
  5. Parallax Background Gradient Overlay

Parallax Background Gradient Overlay

By default, sections with background parallax effect cannot have another background overlay displayed on top of them (as regular non-parallax background do). In order to add such an overlay, we have to use a bit of CSS code.

A great example of such can be found in Lagoon’s homepage, in the Download section (where the app download buttons are placed). The background image of that section has parallax effect enabled, as well as a dark gradient overlay on top of it.

This is achieved by a CSS code that is placed in the page’s Custom CSS settings.

Let’s take a look:

First, note that the section has a custom CSS class appended to it, to make it easily identifiable and apply changes that take effect only on this specific section, and not on all sections of the same kind.

Then, open the page’s Divi settings, navigate to the Custom CSS area, and scroll until you found the :after property of that section’s class. In our case, this will be .download:after. There, you can change the colors and the gradient direction to be applied as an overlay to the section’s parallax background.

Was this article helpful to you? Yes No

How can we help?