Divi background color overlay hack

For a website I was building, I wanted a color overlay on a background image with 0.9 alpha value (so it would have an opacity of 90%). Divi has a built-in overlay blend mode, but that didn’t give the result I wanted. Even with the color of a alpha value of 1 (which is a solid color without any opacity), the image would still be visible way too clear, and moreover in a totally different color than I selected. So I found another way…

The way I did it was by creating a copy of my section, and delete all the content from that copy. The only thing that IS still in that copied section, is a background image.

The original section still contains all the content, and a background color with the desired opacity op 90%.

Next, you’ll have to place both sections over each other. I did that by giving the copy an absolute position (in section settings –> advanced tab –> position). That way, it won’t take up any space.

In my case, the section was the header so I didn’t have to use a top or bottom value, because the absolute position sticks the section on the top of the page.

If you need to use this anywhere else on the site, you might have to play with that a bit, or use (negative) margins to get the copy section in the right place.

You will also have to make sure both sections have the same height of course (which you can do by giving the section a fixed height in the design –> sizing tab) and if you’re using a shape divider, both headers should have that too.

Alternatively, you could also put the background image on the section, and use just one full width row without any margin and give that the background color. Goodluck!