Adding an Overlay To Background Images in WordPress


Adding an overlay to background images in WordPress can seem intimidating to those who do not know CSS, but luckily there is a quick and simple way to get this task achieved. Divi is an amazing theme developed by Elegant Themes. It is our go-to theme to build a site using WordPress. The Divi Builder and Visual Builder are great tools for any web designer, whether your a beginner or a pro. One of the greatest things about Divi is it gives you the ability to get creative with your website without having to put in too much CSS, or none at all if you’re a beginner.

Divi & WordPress

A really cool feature with Divi is the background image editor. You can select the section, row, or module in question that you want to add the background image. Divi comes with a wide variety of modules you can choose from, including sliders and headers. For this example I am not going to be using a module. Instead I am going to be adding the background image to the whole section. Adding these effects to a module will be essentially the same, and maybe even a bit simpler.

Getting started

Lets get started adding an overlay to background images in WordPress. It is best to use a large image when adding a background to a section, this way, as you put more rows and modules into it the image will not lose resolution while it becomes larger.  First you are going to want to add the image. In this case I found a royalty free image of some scenery from the website Unsplash.

As you can see this image is fairly bright, my white text that I placed in the section is barely visible. The text color would have to be a dark for it to be easily seen the way it is now. But what if you want to use white text because it pops more? Well there’s a simple solution for that. The tab directly to the left of the image tab is a gradient tab, in choosing this option you are given the option to choose two colors that gradually fade into each other creating a gradient.

When selecting the colors you want to use for the gradient make sure you increase the opacity, otherwise your image will not be seen. If you’re not looking for something colorful and just want to make your image a bit darker, simply use the black option and decrease increase the opacity until you are able to see both your image, and the text you want to place over it.


And there you have it, you have created your overlay, simple as that. Now there are a lot of other cool ways you can use the gradient feature, but I am going to go over those in future blog posts, so keep a lookout. If you enjoyed this tutorial and want to use Divi for your web projects click here to buy the theme.