How to Add Color & Gradient Overlays to Divi Parallax & Video Backgrounds

Last Updated on September 16, 2022 by 8 Comments

How to Add Color & Gradient Overlays to Divi Parallax & Video Backgrounds
Blog / Divi Resources / How to Add Color & Gradient Overlays to Divi Parallax & Video Backgrounds

Featured Plugin On Sale Now In The Divi Marketplace

Divi Background Plus is available in the Divi Marketplace! That means it has passed our review and has been found to meet our quality standards. You can visit Superfly in the marketplace to see all of their available products. Products purchased from the Divi Marketplace come with unlimited website usage and a 30 day money back guarantee (just like Divi).

Purchase In The Divi Marketplace

Color and gradient overlays are excellent design elements that can capture the attention of your audience and make your content stand out. They work great with background images. Add a background image to a section, row, or column, add a color or gradient overlay, and then place your content over that. One problem, though, is color and gradient overlays don’t work with parallax and video backgrounds in Divi by default.

In this tutorial, we’ll show you how to add color and gradient overlays to backgrounds with either an image in parallax or a video using a third-party plugin from our marketplace. We’ll also see the overlays working with section dividers. This would normally require code, but with the right tools, it’s not difficult for anyone to implement.

Let us begin.

Sneak Peek

Here’s a look at what we’ll build in this tutorial.

I’m creating a layout with a parallax background in one section and a video background in another. The parallax background will have a gradient and the video background will have a single color overlay. We’ll also style the section dividers. I’m using the landing page from the Pizzeria Layout Pack because, well, pizza. This is how it looks on a desktop.

This is how the same design looks on a phone.

Standard Divi Parallax and Video Backgrounds

Standard Divi Parallax and Video Backgrounds

The standard Divi tools allow you to add background images and videos to sections, rows, and columns, but the overlays for them is limited. For background images, you can add a gradient overlay but not an overlay for a solid color. The options for video do not include overlays.

Standard Divi Parallax and Video Backgrounds

The options for background images do include parallax, but if you enable parallax for the background image, the overlay no longer displays over the image. It’s turned off, even though you have it selected to display the overlay.

How to Add Color & Gradient Overlays to Divi Parallax & Video Backgrounds

We’ll add color and gradient overlays to parallax and video backgrounds using a third-party plugin called Divi Background Plus. We’ll also see how to style the section dividers using this plugin.

Install Divi Background Plus

Install Divi Background Plus

Divi Background Plus is available in the Divi Marketplace. Let’s see how to get started. First, purchase and download Divi Background Plus to your computer.

Install Divi Background Plus

In your WordPress dashboard, go to Plugins and select Add New. Click Upload Plugin at the top of the screen.

Install Divi Background Plus

Select Choose File, navigate to the zipped file on your computer, select the file, and click Install Now.

Install Divi Background Plus

Once the file uploads, click Activate Plugin. No other setup is needed. The plugin is now ready to use.

Install Divi Background Plus

A new module is added to the Divi Builder called Divi Background Plus. We’ll use this module to create our gradient and color overlays for parallax ad video backgrounds. This plugin and the backgrounds in the sections are all we’ll need for this tutorial.

Add Gradient Overlays to Divi Parallax Background

Add Gradient Overlays to Divi Parallax Background

Open the section settings where you’ll upload your background image. In this example, I’m using the background image with the first section in the Pizzeria layout pack, but you can upload it to any section, row, or column you want.

Add Gradient Overlays to Divi Parallax Background

Open the image tab in the Content settings. Enable Use Parallax Effect. I’m using True Parallax, which is the default setting. CSS Parallax works too.

Enabling the parallax effect disables the gradient, but the settings for the gradient are still in place. Rather than using the gradient in the section’s settings, we’ll add the gradient in the settings in the Divi Background Plus module.

Add Gradient Overlays to Divi Parallax Background

If you want to use the same gradient that’s already used for this section (like I am), select the Gradient tab and right-click somewhere on the gradient. Click Copy Background Gradient Colors.

Add Gradient Overlays to Divi Parallax Background

Select to add a new module to the section with your background image and choose Divi Background Plus.

Add Gradient Overlays to Divi Parallax Background

In the Layout settings in the Content tab, choose to apply the settings to the section, row, or column. I’m selecting Section.

Add Gradient Overlays to Divi Parallax Background

Open the Background settings and select the Gradient tab. The default gradient is automatically applied. You can adjust the opacity so your background shows through, create your own gradient, or use the one from the layout.

Add Gradient Overlays to Divi Parallax Background

To use the one from the layout, right-click, and select Paste Background Gradient Colors. This will not only apply the colors, but also the settings for the gradient type, direction, start position, end position, and placing the gradient above the background image.

Here’s the result. I now have a version of the original that includes the same image and overlay, but it now displays the background in true parallax.

Here’s how the same layout looks on a phone.

Add Color Overlay to Divi Video Background

Add Color Overlay to Divi Video Background

Add a new regular section under the first section. We will add the background video to this section, a Divi Background Plus module for the overlay, and add text modules to display messages, contact information, and a CTA in the overlay.

Add Color Overlay to Divi Video Background

I plan to use the text from the Call to Action section. This is easy to do with Divi’s Layer tools. To do this, right-click on the section you want to copy and select Go To Layer.

Add Color Overlay to Divi Video Background

Right-click on the rows you want to copy and select Copy Row.

Add Color Overlay to Divi Video Background

Then, select the section where you want to place the row, right-click, and select Paste Row. I’m doing this for both rows that I want to copy from this section. Alternately, I could have copied this section and added the Divi Background Plus module to it.

Add Color Overlay to Divi Video Background

I now have a new section with Divi Background Plus, several text modules, and a CTA.

Add Color Overlay to Divi Video Background

Next, add the video to the background of the section. The colors in the video work well with the colors in the text, but I want to add an overlay to make them stand out a little more. For my background video, I’m using the free video Tima Miroshnichenko’s Mixed Toppings Over a Pizza from Pexels.

Add Color Overlay to Divi Video Background

Open the Divi Background Plus settings and choose Section for the layout.

Add Color Overlay to Divi Video Background

Scroll down to the Background tab and select the color option. Of course, your colors will be different depending on your video. I wanted to give the video a red tint. I’ve used:

  • rgba(150,0,0,0.15)

Here’s how the background video with my red-tinted overlay looks on a desktop.

Here’s the same layout on a phone.

Add Color Overlay to Divi Video Background

For a few more examples, here it is with the standard purple background with a 30% opacity.

Add Color Overlay to Divi Video Background

This is the standard orange with an 80% opacity.

Style the Section Divider

Style the Section Divider

The overlays also work with section dividers. To add a section divider, open the section’s settings.

Style the Section Divider

Go to the Design tab, select Dividers, and choose Top or Bottom, depending on where you want to add a divider. I’m adding a divider only to the bottom. Click on the dropdown box labeled Divider Style to choose your divider.

Style the Section Divider

Choose the divider style you want. I’m selecting the fifth style, which creates an angle with two colors.

Style the Section Divider

Select the edit icon to add a custom color. This is the color that appears in that section where the divider doesn’t show. The default color is white, as you can see in the previous example. Add the color as a hex code or choose the color from the color picker. I’m adding color #0d0d0d, which is one of the colors in the section below the video.

  • Color #0d0d0d

Style the Section Divider

The video now has a styled divider for the bottom of that section. You can see the video showing through the transparent parts of the divider, and it blends well with both sections.

Result

Let’s take a look at how the layout looks on desktop and mobile.

Here’s a look at the desktop version. It has a true parallax background with a gradient overlay in the first section. The second section includes a background image with a color overlay and a section divider that separates it from the next section.

Here’s how the layout looks on a phone. All of the elements work well on mobile devices.

Ending Thoughts

That’s our look at how to add color and gradient overlays to Divi parallax and video backgrounds. Divi Background Plus makes them easy to build and use. It works with sections, rows, and columns and it’s easy to choose between them. All of the customizations are standard Divi tools and settings, so they’re familiar.

Now your backgrounds can include color and gradient overlays without having to disable parallax and videos!

We want to hear from you. Have you created color and gradient overlays for your parallax images and videos with Divi Background Plus? Let us know what you think about it in the comments.

Featured Image via Lauritta / shutterstock.com

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting

Divi Supreme Pro

With 60+ Divi premium modules and extensions to choose from. Take ...

View Product

11189 Sales

Divi Plus

A versatile multipurpose plugin with lots of modules to design & ...

View Product

7689 Sales

Divi Contact Form Helper

Upgrade the default Divi Contact Form with tons of missing, premium, ...

View Product

3545 Sales

Divi Gallery Extended

Masonry gallery plugin for Divi with category filter, dynamic ...

View Product

3892 Sales

Divi Events Calendar

Easily display and style events from The Events Calendar with custom ...

View Product

8311 Sales

Table Maker

Divi-Modules – Table Maker brings beautiful responsive tables to the ...

View Product

7053 Sales

DiviMenus

A powerful menu builder that brings the coolest designs and popups ...

View Product

5926 Sales

Divi Carousel Module 2.0

Robust and extremely customizable carousel module for divi.

View Product

8387 Sales

Premade Layouts

Check Out These Related Posts

Get a Free Augmented Reality Layout Pack for Divi

Get a Free Augmented Reality Layout Pack for Divi

Posted on March 25, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Augmented Reality Layout Pack that’ll help you get your next Augmented...

View Full Post
Download a Free Webinar Theme Builder Pack for Divi

Download a Free Webinar Theme Builder Pack for Divi

Posted on March 22, 2024 in Divi Resources

It’s time for another freebie! This time, we’re giving you a free Theme Builder Pack for Divi. Combining these with our beloved Divi Layout Packs is a great way to build the Divi website of your dreams with ease. This week, the design team has created a beautiful Webinar Theme Builder...

View Full Post
Get a Free Modeling Agency Layout Pack for Divi

Get a Free Modeling Agency Layout Pack for Divi

Updated on March 21, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Modeling Agency Layout Pack that’ll help you get your next Modeling...

View Full Post

8 Comments

  1. Hi! Does blending modes work with this plugin+parallax?

  2. At first I thought this was going to be an actual tutorial. Instead it was a sales push.
    With knowledge of jQuery and CSS, you can perform the same thing. Granted the annual $9 price tag is rather handsome and would save developers time, wouldn’t it be more valuable to teach how to use CSS/jQuery to perform the same function?

  3. what do you think video backrounds on mobile devices?

  4. Can you tell me, does this plugin also work with slider sections?

  5. just installed this, and this is really awesome, very eye catchy. very much appreciated. I there any option to add the gradient parallax background with more than 2 colors. thanks in advance.

  6. Could you not just do this using the section’s CSS Before attribute in the Advanced tab? Why use a plugin?

  7. why is this not a native feature??

  8. Thanks for featuring Divi Background Plus! Much appreciated! 😁

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today