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 an overlay effect to a section or any other Divi modules that contain a video background.

Here is a simple CSS 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 Video where you want to get the effect.

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

    content:"";
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:

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:
​https://cssgradient.io/

Lastly, you may need to increase the z-index of the Row inside that section, sometimes the overlay may be overlapping the module/content inside that section.

To fix this, you can go to that Row settings > Advance > Position settings and increase the z-index to 10

That's it! πŸ˜„

Did this answer your question?