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.
Subscribe for Divi Freebies
Plugin update notifications :: stay abreast of new and or updated items by opting in to my very occasional email newsletter. I swear by all that is right and holy your email address will never be shared, sold, traded or otherwise abused and I seriously doubt you'll see anything more than plugin/code update notifications when they are of the utmost importance.