All Collections
FAQ's and Troubleshooting
Video Background With Gradient Background Over It
Video Background With Gradient Background Over It

This article will help you to define a semi-transparent gradient background over your video.

Karen avatar
Written by Karen
Updated over a week ago

By default, the Video Background overrides all the other types of backgrounds, so if you'll try to define a gradient background on top of the video, it won't work. 

To get the result you want, you need to define a gradient background (or background color/background image) in a child module. Here is an example:

  1. Define background video to the Divi Section module. Remove the padding for the section under the Design tab / Spacing options by setting it to 0;

  2. Next, define a gradient-background color for the Row that sits in the Section module. Make the Row fullwidth and add some top/bottom padding to increase the height for the video background.

  3. Define any background you want to the Row. If it's a gradient background, then you can change the transparency of the gradient colors.

Here is a detailed screencast:

You can do the same for the Row modules. For example, define a video background to the row and a gradient background to a module inside the Row. Also, you can try it within a Column. 

Did this answer your question?