Full Screen Background Videos (with a Twist) in Divi, Part 3

Howdy again, friends.

If you haven’t read them already, you might want to read/watch parts 1 and 2 before this one, although in some ways this tutorial stands on its own — you don’t have to have a video background to benefit from this technique.

At the end of the Part 2 tutorial video, I mentioned that I had added a class to the section containing the hero banner content to create a hook for some custom CSS:

Now, I’ll make my standard disclaimer and say that this part of the technique can be replicated entirely via the Divi builder. That’s nice, but unless you’re building a one-page site, it’s messy. Better to use a child theme and its stylesheet to create and control the styles we’ll be building and discussing herein.

Give it up for child themes

WordPress child themes are lovely things, and there are oodles of plugins nowadays to help you create child themes if you’re not comfortable using a code editor and FTP to do it. In the past, I’ve used the Child Them Configurator plugin, but these days I prefer the Divi Children plugin specifically for Divi-based sites. The former works with any theme.

So what’s so great about child themes? If you’re a relative newcomer to WordPress and you haven’t been through the parent theme/child theme spiel, here it is: If you purchase a theme, the developer is going to be releasing regular updates for that theme because the WordPress core is evolving all the time. If you’ve been naughty and have edited that theme directly (whether you’ve changed the functions.php file or the style sheet) you run a very great risk of having all of your customizations wiped out every time the theme gets updated.

Working with a child theme keeps your customizations safe. A child theme inherits all the styles and functionality of its parent (in this case, Divi) and allows you to create targeted overrides.

Transparently cool

Now that that’s out of the way, let’s take a look at the custom CSS that goes with the .transparentBlack class I mentioned previously:

.transparentBlack { background-color: rgba(0,0,0,.50); }
.transparentWhite { background-color: rgba(255,255,255,.925); }
.transparentCanvas { background-color: rgba(236,232,215,.5); }
.transparentAqua { background-color: rgba(24,102,102,.85); }
.transparentRed { background-color: rgba(156,0,22,.85); }

You can see transparent black, transparent white, transparent canvas, transparent aqua, and transparent red here.

I’ve set a background color for each of these classes in CSS using RGBA. RGBA is just a way of setting colors using red/green/blue values and then a transparency value that’s between 0 and 1. One (1) is completely opaque, zero (0) is completely transparent. If you chose a decimel inbetween, it’s going to be semi-transparent. The closer you get to one, the less transparent it is. The closer you get to zero, the more transparent it is.

Once you set up your transparent background classes in your child theme style.css file and add those classes to the Divi builder sections that you want to have transparent backgrounds, the result is what you see here:

Now, go make some pretty stuff!