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

by | Oct 24, 2016 | CSS Tips & Tricks, Headers and Sliders, Video

Sign up to receive all the latest themes, tutorials, tips & tricks from Divi Soup

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.

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

 

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.

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

 

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.

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

 

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

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

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.

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

 

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

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

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

Michelle Nunan is a multi-award winning marketer & trainer and freelance web designer as well as a wife and mother of two beautiful girls and one cheeky Black Labrador called Harley. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

Join me on Facebook

WP Theme FAQs
Divi Switch
WordPress Theme Editor
Stock Images for as little as $0.69 each
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

Pin It on Pinterest

Share This
pro-membership

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!