R24: How to add a transparent image overlay to a background video in Divi

Recipe #24 is something I have seen asked in the Facebook groups several times lately, how to add a transparent image overlay to a background video. There are a few ways to do this and in this recipe I am going to show you two.

We are going to use the fullwidth header module as this is most commonly where a background video is used, and this module also gives us the option to easily add a heading, subheading and buttons.

This is actually a lot simpler to do that it looks and uses very minimal CSS but the main difficulty is, as I explain in this post, the background image element doesn’t have its own class so we can’t target it. But there are ways around that

Watch the video, get the code you need in the accompanying blog post, be sure to scroll to the bottom for your fabulous freebie, and let me know what you think in the comments!

So let’s get cooking!

Ingredients

The Divi Theme from Elegant Themes.

A video to use for your background. You can get some great free ones at coverr.co and that is where I got the one used in the demo.

An image to use as your overlay. Dimensions of 1920 x 1080px are perfect for a fullscreen video, and a jpg is fine, you don’t need to create a transparent png with this method and a jpg is actually better as generally the file size will be smaller.

Cooking time

This should take you around 5 minutes max.

Preparation

The first thing we need to do it set up our fullwidth header with a video background, so add a fullwidth section and a fullwidth header module to your page.

Next, open up the section settings and click on the Upload a Video button next to the Background Video MP4 field, add your video to the media library and select it to add it to the section. Whilst you are in your media library, also upload the image you are going to use for your overlay and make a note of the URL. Then Save & Exit.

That’s our prep done.

Method

The first method I am going to show you is the overlay with solid text and buttons, this is the first example in the demo.

Open up the module settings and add your title and subheading, set your text colour and orientation and set make fullscreen to yes. You don’t have to use fullscreen, this will work without that option too but it’s a nice effect.

If you want buttons on your header then scroll down a bit further and add in your button text and urls and make any adjustments you want to the text and buttons in the Advanced Settings Tab. Then click on the Custom CSS tab and give your module a CSS class of ds-video-image-overlay1

Now for the CSS.

Copy and paste the CSS below into your child theme stylesheet, Divi options custom CSS box or the page specific CSS box and change the URL to the URL of your overlay image that you added to the media library earlier.

What we are doing here is using the :before Pseudo Element to add our overlay image to the module, we are positioning it absolutely with a top and left position of 0 so it sits over the top of our video, making it 100% of the width and height of our module and setting the opacity to 0.5 to give it transparency.

.ds-video-image-overlay1.et_pb_fullwidth_header:before {
    content: url(https://divisoup.com/wp-content/uploads/2016/09/building-2.jpg);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
}

And that’s it. Now preview your header and you should have a video background with your transparent image on top. You can increase or decrease the opacity property in the CSS to have the image more or less transparent.

Now for the second method. This option requires even less CSS and it also makes the text and buttons in the header transparent too. This means the video slightly shows through the header content giving a nice animated effect. You can see on my demo how the text gets brighter when the people walk past behind it.

You need to follow all the same steps as in the previous method but with two slight changes:

In the Module Settings, scroll down and add your overlay image directly to the Background Image URL field.

Then click on the Custom CSS tab and give the module a CSS Class of ds-video-image-overlay2 and then Save & Exit

Now instead of the previous CSS, add the following:

.ds-video-image-overlay2.et_pb_fullwidth_header {
    opacity: .5;
}

All we are doing here is setting the entire fullwidth header module to have an opacity of 0.5, which is what creates the effect where the video slightly shows through the header content.

Now preview your header and you should have something similar to the second example in my demo.

You will probably want to create a different header to show on tablet and mobile as videos use a lot of data

And that’s it.

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.

Michelle X