How to Create Color Overlays for Divi Sections

Published on January 13, 2017

We now offer a plugin that brings this feature to Image Backgrounds, Parallax Backgrounds, and Video Backgrounds. It’s much easier and quicker than writing code. It’s also a lot easier to update code. In fact, no code is needed.

Demo: http://madebysuperfly.com/divi-background-plus/
Purchase: https://besuperfly.com/product/divi-background-plus/

The Fullwidth Header section in Divi gives you the option to create a background overlay. However, for standard sections (or any other location) that option is not available. This means you have to create the overlay on your photo using Photoshop or something similar. This makes it very difficult to change and test…

This tutorial will show you how to create a background overlay where it is not available in Divi. This overlay makes reading the text easier.

This doesn’t just make it easier to change and adjust using the Inspect Element tool, but also provides ease in adjusting photos and colors.

We use ANTHEM in the video for demo purposes, but this will work on any Divi site.

Step 1: Watch the video.

Go for it… it’s just a few minutes. It will save you time in the end since you’ll know how it all works!

Step 2: Go to “before” area in the section custom CSS

For this tutorial, we put all CSS in the section CSS itself. NOT in the Divi Custom CSS section in General Settings.

Step 3: Add the CSS.

Add the snippet of CSS below. Adjust colors as needed.

(step 3.5: If using parallax…)

Add the snippet of CSS below marked “if using parallax” into the “before” section. Then change the section class to “greyOverlay”.

CSS Code


 /* PLACE IN THE BEFORE AREA */
content:"";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(58, 60, 69, .6);

 /* IF USING PARALLAX */
.greyOverlay .et_parallax_bg:before, .greyOverlay:before {
  content:"";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(58, 60, 69, .6);
}

Step 4: Tweak.

Feel free to play around with changing the CSS class to a few of the other options to find out which style works best for you!