If you’ve ever tried to add an overlay to a parallax background image in Divi, you’ll have discovered that it’s not possible to do with the usual Divi settings. The moment you flick the parallax switch, the overlay disappears. In this tutorial, I’ll show you a quick and easy way to do a parallax background image with an overlay.

The Example

In the Divi section below, there’s a dark overlay over the same image I used as the featured image for this blog post. You’ll notice the parallax effect as you scroll down.

Background Image with Overlay and Parallax

How To

The processing of adding an overlay to a parallax background image takes three easy steps. The first would be to set the colour of the overlay.

Next, turn on the “Place Gradient Above Background Image” switch which you’ll find a little bit further down.

Now that you’ve prepped the overlay, you just need to add the following CSS to the Main Element of the Divi Row or Section in question. You find this under the Advanced tab of the Section or Row you’re working on. Make sure NOT to enable “Use Parallax Effect” using the switch under the background image.

And that’s it.

Wrapping it Up

So, without much fuss, it’s quite simple to add an overlay to a parallax background image in Divi.

Video by Kelly Lacy from Pexels

Photo by Jason Leung on Unsplash