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.
Video Instructions
Before
After
Instructions
- 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.
Curly
Jerome Lester Horwitz (8/22/1903 – 1/ 18/952). Stage name Curly Howard, was an American comedian and vaudevillian actor. He was best known as the outrageous member of the Three Stooges.
Notes
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.
Grab the Layout
Check out my settings and have some fund fooling around with it.
Tip Jar
Send a Gratuity
Your generosity is greatly appreciated 🙂
Give a Shout Out
Get Divi Now
Get the Divi theme for WordPress - the smartest, most flexible theme in the collection. With Divi, the sky’s the limit.
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.
