Adding a color or overlay to a video background can significantly enhance the visual appeal of a website, making content stand out and creating an immersive user experience. For websites built using the Divi theme, this process is straightforward but impactful.
I love to think of a solution, as usual!
In this tutorial, I’m going to show you How to add a color or overlay to a Divi background video in WordPress.
- Go to Section Click the “blue” Gear icon ⚙️
- Go to the Content Tab → Background → Background video
- Choose your video files (both mp4 and webm formats)
- Next, Go to the 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.5);
z-index: 1;
}Check out: Where to Add Custom Code in Divi
Notes:
This CSS rule defines the overlay color as background-color: rgba(0,0,0,0.5).
You can adjust how dark you want the overlay to be by changing the last value in the background-color line for example rgba(0,0,0,0.3), rgba(0,0,0,0.6).
Great, You did it.
Why Use Color and Overlays in Video Backgrounds?
Video backgrounds often add dynamic and attention-grabbing elements to websites, but without proper enhancements, they can sometimes overwhelm other content on the page.
Key reasons to use color and overlays in your video backgrounds:
- Improved Readability: Adding an overlay makes text or content on a video Background easier to read by softening the brightness and reducing distractions.
- Enhanced Design Consistency: Using overlays with brand colors creates a consistent look and strengthens your Website’s visual identity.
- Mood and Style: Different colored overlays can set the tone and mood of your content, such as a dark overlay for a dramatic effect.
Discover more by supporting me on
