How to Create Color Overlays to Divi Parallax Background Image

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 tutorial will show you how to add overlay color to the parallax background image on standard Section. This overlay makes reading the text easier especially when the background image has multiple colors.

  • Give the Section with the background parallax image a class of  bg-overlay
Section Module Settings > Advanced > CSS Class = bg-overlay
  • Add this code to your CSS file or Theme Options CSS section:
Divi > Theme Options > General > Custom CSS
/* Paralax image background color overlay effect */
.bg-overlay .et_parallax_bg::before {
	background-color: rgba(54, 54, 54, 0.75);
	content: "";
	height: 100%;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;

Feel free to change the RGB color codes and opacity setting to find out which style works best for you!

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *


  1. Excellent!
    Thank you so much! I will be linking to this article as soon as my article is complete.

    I replaced the background color with this transparent gradient, and it works also;
    background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

  2. The official Divi blog recommends a paid plugin to achieve this, so I’m very glad to have found your post with this quick and easy solution. The Custom CSS box in the Divi Theme Options makes it easy to apply this code without worry of breaking anything else. Thank you!