Tinted Background Image

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

Tinted Background Image 1

Before

Content-Over-Tinted-Background

After

 

Instructions

  1. Create new page or post.
  2. Add Standard Section.
  3. Add Row. I’m using three columns.
  4. Add Module. I’m using Blurb Modules.
  5. Add layout from library.
  6. 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
  7. Open the Row settings
  8. Row General Settings:
    • Make This Row Fullwidth: Yes
    • Use Custom Gutter Width: Yes
    • Gutter Width: 1
    • Custom Padding: 75px | 75px | 75px | 75px
  9. 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!
  10. Edit your module thus giving the section row its content.
Divi Builder Section Row and Modules Setup
Divi Section General Settings
Divi Row General Settings
Divi Row Advanced Settings
Larry

Larry

Louis Feinberg (October 5, 1902– January 24, 1975), known professionally as Larry Fine, was an American comedian, actor, violinist, and boxer; member of The Three Stooges.
Moe

Moe

Moses Harry Horwitz (June 19, 1897 – May 4, 1975), known professionally as Moe Howard, was an American actorand comedian best known as the de facto leader of the Three Stooges
Curly

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.
Download

Get Divi Now

Get the Divi theme for WordPress - the smartest, most flexible theme in the collection. With Divi, the sky’s the limit.

Get Divi
Divi WordPress Theme

mailbox email subscribe

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.

Submit a Comment

Your email address will not be published. Required fields are marked *