Add an Overlay to Video Background (Divi Tutorial)

Copy and paste this CSS code

1 min read

dark overlay over a video

When you use an image or video for a background in Divi, you may have noticed there is no option to add an overlay or gradient. This makes it difficult to place text over the video since you’ll probably need to darken the video for your text to be visible.

Fortunately, there’s an easy trick to get around this.

Go to the section or row’s settings. Then go to the Advanced tab. Under the Custom CSS area, add the following code to the Before area:

    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1;
blog Add an overlay to video background Divi Tutorial

You can adjust how dark you want the overlay to be by changing the last value in the background-color line.

George Leon


Leave a Reply

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