Adding an overlay to a background video can enhance your content's visual appeal and readability by providing a stylish filter or effect. This technique helps to make text and other elements stand out against the moving background.
In this article, we will guide you through the process of adding an overlay over a background video in Divi.
Open the Section settings by clicking on the Gear Icon
In the Content Tab → Background → Background video
Choose your video files (both mp4 and webm formats)
Go to Advanced Tab → Custom CSS → Free Form CSS and add this code:
selector::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 1;
}
Notes:
The color of the overlay is defined in this CSS rule
background-color: rgba(0,0,0,0.6);Instead of the
background-coloryou can use thebackground-imageproperty and define alinear-gradientfor examplebackground-image: linear-gradient(180deg,#0c71c3 0%,#29c4a9 100%)