The Divi Theme's Call to Action (CTA) module comes with built-in options to set either a background image or a solid background color. Useful as this is, something that doesn't seem to be possible with these options alone is to combine them and have the background image showing through a semi-transparent background overlay color.

Fortunately, by enlisting the help of a Divi Builder row, we can fake this effect. We simply set the background image on the row instead and give the CTA a solid background color (with transparency). Follow that with a little bit of padding adjustment and we're done. Here's how…

I'll assume you're sufficiently familiar with Divi to create a CTA module, adding a title, text, button, etc., as necessary. Go ahead and do that now.

I've given mine (above) a solid blue background for now, mainly so the text is visible. The next step deals with setting up the CTA background fully.

While in the CTA Module's settings, we'll set its background color and transparency.

Make sure you are in the "General Settings" tab, and then locate the "Use Background Color" option. Set this to "YES".

Now select your color from the "Background Color" option. This will (eventually) be the color which overlays your background image, so choose a color close to what you want – you can always tweak this later when you have the background image in place.

Finally, we want to make this background color slightly transparent. This can be done using the bar on the right of the color picker (marked in orange, above).

If set to the very top, the background color will be fully visible and not transparent at all, while when set to the bottom, the background will be fully transparent and essentially invisible. So pick something in between these two extremes. The closer to the top, the less the background image will show through. Again you can tweak this when you have the background image in place.

If you've played around with the CTA module's background settings, you've probably noticed that there is no easy way to create a background image with a semi-opaque overlay color. To get around this, we'll use a bit of a trick – setting the background image on the row itself and then giving the CTA module a semi-transparent background color so that the row's background image shows through.

So let's put the CTA module into a row of its own, as shown above. Note that the need to use a separate row means that we can only really use this technique on CTAs in a single column row layout.

Now we'll go ahead and add a background image to the row containing the CTA module.

You'll find the option to add a background image in the row's settings, on the "Advanced Design Settings" tab. Pick the image you want to use for your background.

Now switch to the "General Settings" tab. In order to make sure that the background image is the same size as the CTA module, we need to remove the padding on the row. We can do so, by setting all the padding to "0px", as shown above.

Now preview your page / post. You should now see something similar to the CTA above, with the background image partially showing through your CTA's background color.