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.
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
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.