Adding a gradient background overlay to your background video can enhance its visual appeal and ensure that text and other elements remain readable. This stylish effect can elevate the design of your Divi website, creating a more engaging and professional look.
In this article, we will guide you through the process of adding a gradient background overlay on top of a background video in Divi.
Insert a Regular Section by clicking on the Add Section button
Go to the Content tab → Background → Video Background and add your video files (both mp4 and webm files)
Insert a 1 Column Row by clicking on the Add Row button
Go to the Content Tab → Background → Gradient Background and set your desired gradient background
Go to the Design Tab → Sizing and set the Width and Max Width to 100%
Go to the Design Tab → Spacing, and for the Top and Bottom Padding, set 0
Here is a detailed screencast:
Note: You can do the same for the Row modules. For example, define a video background for the row and a gradient background for a module inside the row. You can also try it within a Column.