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!

Tawfiqur

I'm a freelance Wordpress Front-end Developer, work from my home office. Mostly do my freelance work on Upwork. I'm a TOP RATED freelancer with over 11K+ Work Hours. Specialize in HTML5, CSS3, SCSS, JavaScript, jQuery, Ajax, ES6, Bootstrap, PHP, MySQL, Wordpress, Woocommorce and Custom Wordpress Theme and Plugin Development

Leave a Reply

Close Menu