All Collections
Divi Documentation
Customizing Divi
Adding Overlay To Video Background
Adding Overlay To Video Background
In this article you'll learn how to add Gradient/Color Overlay to your video backgrounds
Karen avatar
Written by Karen
Updated over a week ago

By default it's not possible to add overlay effect to a section or any other Divi modules that contain a video background.

Here is a simply trick that you can use to get an overlay effect for your video backgrounds. This example is explained for the Divi Section but you can implement it for any Divi module.

First of all, define a Background Video under the Section Settings / Background where you want to get the effect.

Next, and the following code under the Section / Advanced tab / Custom CSS / Before Element field:

display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
z-index: 9;

Like this:

That's it!

The color of the overlay is defined in this line:

background: rgba(0,0,0,0.6);

So, you can simply replace it with whatever you need. For example if you need a gradient-based overlay you can use this one:

background-image: linear-gradient(180deg,#0c71c3 0%,#29c4a9 100%)!important;

You can use the following online service to generate any background overlay color you want to use:

Did this answer your question?