Posted on the Divi Help and Share Facebook group:
I don’t know why ET didn’t include that (tinted background image) capability basically wherever one can include an image in Divi. Because there are some people who will want that capability for nearly every image.
The capability is in there, though it is a bit fiddly. What the user is trying to do is have a tinted background over an image whereupon the content on top doesn’t get lost.
- Create new page or post.
- Add Standard Section.
- Add Row. I’m using three columns.
- Add Module. I’m using Blurb Modules.
- Add layout from library.
- Open the Section settings and add a background image then modify the following setting under the General Settings:
- Custom Padding: Top: 0 | Right: 0 | Bottom: 0 | Left: 0
- Open the Row settings
- Row General Settings:
- Make This Row Fullwidth: Yes
- Use Custom Gutter Width: Yes
- Gutter Width: 1
- Custom Padding: 75px | 75px | 75px | 75px
- Row Advanced Settings:
- Custom Margin: Top: 0px | Right: empty | Bottom: 0px | Left: empty
- Background Color: rgba(139,161,255,0.8) – This is the tint!
- Edit your module thus giving the section row its content.
This takes a lot of adjusting of row/content padding and margins to get the layout the way you like it. A faster less complicated method is to create a tinted image in Photoshop, use that as the Section background. This way you keep the built in Divi padding, gutters and margins. Additionally, a Photoshop tinted image will compress much smaller than a non tinted image. The image I’m using here for the background weights in at 223.8 KB vs. 53.1 KB for a Photoshop tinted version. Both images were compressed via http://tinypng.com.