Add background overlay to parallax and video backgrounds

Last updated on: May 05, 2020

Have you tried adding a background overlay to your section with a parallax background image or video background? it mostly didn’t work or you had to install a plugin like background plus to just be able to add an overlay to your section background but all it actually takes to achieve is a few lines of CSS.

Adding our overlay to the section:

On the section, you would like to add your background overlay to, open that section settings and select the advanced tab, under the advanced tab click on the Custom CSS toggle, and where it says before is where we will be adding the following CSS to.

Add background overlay to parallax and video backgrounds 1
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Add the following CSS to the before

content: '';
position: absolute;
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,0.85); /* Change you overlay colour */

Add a basic colour or a gradient:

All you need to do is replace the last line of code to the colour you want to use, for setting your own basic background colour all you need to do is click on the little coloured circle and it will popup a colour selector for you to choose your colour.

Add background overlay to parallax and video backgrounds 2
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

To create a gradient overlay you will can use the following CSS Gradient site to generate your gradient CSS code, first thing you will need to is select the colours you want to use for your gradient, change any of the other settings for your gradient that you want to change.

Add background overlay to parallax and video backgrounds 3
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Once you’ve created your gradient, you can scroll down a bit to the CSS section, then copy the CSS to your clipboard

The DEMO | Result

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Divi is the #1 WordPress theme

The Divi Theme is an amazing tool for anyone who is wanting to build their own website, with one of the best WordPress page builder which comes packed with tons of amazing modules and premade layouts to help you get started.

<a href="" target="_blank">James Fosker</a>

James Fosker

James Fosker is the founder of Fosker Media a small digital marketing company based in Durban South Africa, James is also one of the original Divi 3rd party developers, releasing the 5th Divi specif plugin back in 2015.


Submit a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest