pixel

Back in October of 2015 I wrote a blog post How to Create a Transparent Overlay on an Image with the Divi Theme.  Apparently a lot of people are curious because it’s one of our most popular posts and the video I made has nearly 30K views over on YouTube.

In Divi time, nearly 2 years is similar to two decades with all of the upgrades.  Today I thought I would share with you how to add a transparent overlay to a hero image as of now, July 2017, Divi 3.0.63, WordPress 4.8.

To please click on the Divi Builder, then select Full Width Section.  We are using the Fullwidth Header Module.

divi | full width header module

As with all modules, you click on the three horizontal lines and the module will open for editing.

Add the content that is appropriate for you – Header, sub head, buttons, etc.

Then scroll down to the Background section.

how to use the full with header module | divi

Choose your background overlay color and add a background image.

transparency toggle for divi overlay

The slider on the right sets the level of transparency.  You may want to play with the level of transparency, making it more or less opaque.

background image size | divi theme

I set the background image size to cover, (the option fit was too large and actual size too small). The background image blend is a cool new feature, which you can read about in the image blends section of the Elegant Themes website.

Next, toggle into the design tab.

make hero image full screen

You want to make sure that you toggle YES for the option to make this Full Screen.  If you skip this step you will get something like the image below, which has the image too narrow.

Why Is my Hero Image Too Narrow | Divi Theme | Transparent Overalys

 

My final result:background image with transparent overaly

Since the other video has so many views, I thought I would make a new one.

Notes,: the image I used I downloaded from Gratisography which is an alternative to Unsplash, all of the images are free use. The recommended size for a full width background image is 1920. This post is the ultimate size guide for images with Divi.

Happy designing.  Please share what you have designed so we can see the module in use in real life.

EIleen Lonergan
Eileen Lonergan was an integral part of this company. Unfortunately, Eileen Passed away on the 31st of October 2018 after a short battle with Cancer. She leaves behind the legacy of the Divi Theme Users Group and hundreds of people that she helped through coaching, building outstanding websites and just being - accessible. We miss her every day!
Click to access the login or register cheese

Subscribe To Our Newsletter to get the latest news and product updates

You have Successfully Subscribed!

Pin It on Pinterest

Share This