Search

How to Add Color Overlay to the Background Image in Divi

The colors and brands have a very close relationship. Some famous brands will even be very easy to recognize just from the colors identical to the brand. Adding a color overlay to the background image can help you to get more brand awareness for your business and make your brand memorable to your users.

This article will show you how to add a color overlay to the background image in Divi Builder.

How to Add Color Overlay to the Background Image in Divi Builder

Adding a color overlay to the background image in Divi is very easy. First, go to your Divi Builder editor, and we will start everything from scratch, so create a section. In this example, we will add a color overlay to the sections background image, but you can also add a color overlay to the rows and modules background image.

Alright, go to the Section settings -> Content tab -> Background.

Next, click the Background Image and add a background image, and you can edit the background image settings with your preference.

Once you’ve added a background image, navigate to the Background Gradient panel afterward. Enable the background gradient setting by clicking the plus button (➕). When you’ve added a background gradient, some options will appear, navigate to the Place Gradient Above Background Image option and enable it by switching the toggle to YES.

We will move to the last step, adding the color overlay to the background image.

Go to the Gradient Stops option, then click the toggle, and now you can adjust the opacity of the color (see the GIF below).

The Bottom Line

This article shows how easily you can add a color overlay to the background image in Divi Builder. Although there are no built-in features specifically for adding a color overlay to the background image in Divi, you can still do that with your creativity.

If you often create WordPress websites with Divi, you can use Divi Cloud for time efficiency. You can store your Divi assets (layouts, theme builder templates, code snippets, etc.) in the cloud, and you can access that from any website you create.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

Leave a Comment

Save your Divi assets to the cloud and access them from anywhere.