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!
Thank you very much for this! Was pulling out my hair on this
Thank You so many men really thank you I’m searching for this actually Divi theme doesn’t allow for changing background overlay it helps me love you keep it up.
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));
Great! Thank you for this!
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!
Great stuff, thank you!