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.
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.
Choose your background overlay color and add a background image.
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.
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.
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.
My final result:
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.