UPDATE: You can use background gradient to get an overlay in the right color.
I recently learned there’s a much easier way than the one I described below to get an overlay in the right color: use the background gradient option instead of a solid background color.
When you use a background gradient in combination with an image, you’ll get a switch
“place gradient above background image”. When you flip that switch to “yes”, the gradient will overlay the image.
Here are the steps:
1) Click on the third icon (image) under the background options to select your background image. Next, click on the second icon (gradient).
2) Select the gradient colors you want to use. If you want to use a solid color, just select the same color twice.
3) Set the switch under “Place Gradient Above Background Image” to “yes”.
4) Use the opacity bar to set the desired transparency, so the image becomes visible.
You can set the same opacity for both colors, but you could also play with that a bit to get a cool effect. For example, you can get a beautiful subtle effect by choosing two colors that a really close together, for example a lighter and darker shade of the same color.
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!
Leave a Reply