How to Create Color Overlays for Divi Sections

Published on January 13, 2017

We now offer a plugin that brings this feature to Image Backgrounds, Parallax Backgrounds, and Video Backgrounds.  It’s much easier and quicker than writing code.  It’s also a lot easier to update code.  In fact, no code is needed.

Demo:  http://madebysuperfly.com/divi-background-plus/
Purchase:  https://besuperfly.com/product/divi-background-plus/

The Fullwidth Header section in Divi gives you the option to create a background overlay. However, for standard sections (or any other location) that option is not available. This means you have to create the overlay on your photo using Photoshop or something similar. This makes it very difficult to change and test…

This tutorial will show you how to create a background overlay where it is not available in Divi. This overlay makes reading the text easier.

This doesn’t just make it easier to change and adjust using the Inspect Element tool, but also provides ease in adjusting photos and colors.

We use ANTHEM in the video for demo purposes, but this will work on any Divi site.

Step 1: Watch the video.

Go for it… it’s just a few minutes. It will save you time in the end since you’ll know how it all works!

Step 2: Go to “before” area in the section custom CSS

For this tutorial, we put all CSS in the section CSS itself. NOT in the Divi Custom CSS section in General Settings.

Step 3: Add the CSS.

Add the snippet of CSS below. Adjust colors as needed.

(step 3.5: If using parallax…)

Add the snippet of CSS below marked “if using parallax” into the “before” section. Then change the section class to “greyOverlay”.

CSS Code

 


 /* PLACE IN THE BEFORE AREA */
content:"";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(58, 60, 69, .6);

 /* IF USING PARALLAX */
.greyOverlay .et_parallax_bg:before, .greyOverlay:before {
  content:"";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(58, 60, 69, .6);
}

 

Step 4: Tweak.

Feel free to play around with changing the CSS class to a few of the other options to find out which style works best for you!

59 Comments

  1. Pete
    Pete on January 13, 2017 at 3:03 pm

    Excellent! I had this very issue only last week, did what you did at first however that wasn’t great.

    The way you show above is PERFECT! Thanks for sharing 🙂

    Pete

    Reply
  2. Steve
    Steve on January 14, 2017 at 4:25 am

    Awesome! It’s such a pain the ass having to add overlays in Photoshop all the time.

    Crazy that Elegant Themes don’t have this functionality built into the Section settings.

    Thanks for the CSS!

    Reply
  3. Raquel
    Raquel on January 17, 2017 at 11:40 am

    Genius! Cheers dude

    Reply
  4. Steve Cooper
    Steve Cooper on January 17, 2017 at 11:31 am

    Absolutely brilliant!

    The code works perfectly and your explanation was quick and easy to follow.

    Reply
  5. Javier
    Javier on January 21, 2017 at 12:41 pm

    Hey great article!!
    I have a section with a background video at mostachomarketing.com. Can you please help me with the code I need to put a white overlay to the video?

    Thanks

    Reply
    • Nathan Duvall
      Nathan Duvall on January 24, 2017 at 9:20 am

      Hi Javier, the trick on your site is to add this to your background video section > custom css > after box:

      content: ‘ ‘;
      background: rgba(255, 255, 255, 0.5); /*define background color or add gradient CSS*/
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;

      Then you’ll need to make sure your header text is on top of the gradient, just add a z-index to the text row > custom CSS > main element box.

      z-index: 1;

      Hope this helps!

      Reply
      • Gabriel Marusca
        Gabriel Marusca on April 19, 2017 at 7:22 am

        Hi Nathan,
        Thank you for this great tutorial. I’m trying to add an overlay background to a Fullwidth-Slider that has one video background slide.

        I added the below code in the custom css> after for that particular slide with no effect:

        content: ‘ ‘;
        background: rgba(2, 34, 66, 0.7) !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;

        Thank you in advance!

        Reply
        • Nathan Duvall
          Nathan Duvall on May 11, 2017 at 9:56 am

          Hi Gabriel, what CSS selector were you targeting? What you have above works if you do something like this:

          .md-fw-slider .et_pb_slide:before {
          content: ”;
          background: rgba(2, 34, 66, 0.7) !important;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
          }

          Reply
      • Jake Kramer
        Jake Kramer on May 22, 2017 at 11:53 am

        Hey KC! Thanks for the comment 🙂 Have you added this to your “Custom CSS” section in “Divi > Theme Options” and cleared your cache? Also, have you tried adding the “!important” tag?

        Reply
  6. ALLAN TODD
    ALLAN TODD on January 27, 2017 at 4:37 am

    Hi
    What is the name of the css inspector you are using

    Thanks in advance
    Allan

    Reply
    • Nathan Duvall
      Nathan Duvall on January 27, 2017 at 9:48 am

      Hi Allan — most of us use Coda as our CSS editor and just the built-in Chrome Inspect Element as our CSS Inspector.

      Reply
  7. KL
    KL on March 15, 2017 at 6:30 pm

    I’m sorry, this is a rather dummy question but if I want to use the code in my child theme instead of the “Before” section in the divi builder do I just copy and paste it as it is? Or do I have to add something more?

    Reply
    • Jake Kramer
      Jake Kramer on March 16, 2017 at 10:36 am

      Hey KL, It depends on the specific code. Sometimes you have to add the “:before” cap to the CSS class or element. It really just requires some playing with. Hope that helps!

      Reply
      • KL
        KL on March 16, 2017 at 4:06 pm

        Hey Jake, thanks for answering so fast! And in the case of this tutorial what code should I put to my child theme?

        Reply
        • Jake Kramer
          Jake Kramer on March 16, 2017 at 4:52 pm

          KL, the code needed is in step 3.5. Click on “gimme that code!”. Is that what you mean?

          Reply
          • KL
            KL on March 18, 2017 at 9:37 am

            haha, no I meant how to use the code you provided in the stylesheet of my child theme. But I already found it out! Thank you guys! You’re doing awesome job with these tutorials

  8. Kate Doster
    Kate Doster on April 4, 2017 at 4:43 pm

    Thank you so much Jake. You have no idea how much this means to none coder DIYer like myself.

    Reply
  9. Bethan Arundel
    Bethan Arundel on June 23, 2017 at 6:33 am

    Hey, I’m using paralax and the code is not working. Only when I disable the paralax. Any idea of what I’m doing wrong?

    Reply
    • Nathan Duvall
      Nathan Duvall on August 12, 2017 at 5:01 pm

      Hi Bethan, got a link to your site you can share? Happy to take a look.

      Reply
      • Terry Hale
        Terry Hale on September 3, 2017 at 10:56 pm

        Hi Robb, thanks for reaching out.

        Is section 3.5 in the article above not working out for you? I can’t see on your page where the classes discussed in the tutorial are.

        Reply
  10. Vaibhav Dingre
    Vaibhav Dingre on June 27, 2017 at 3:00 am

    Hello,

    I am new to using Divi Builder. Still, I have designed a full page for my site. Everything is OK but I want to add transparency or opacity to the background image of section module. I am tired of searching for it online. I can not write CSS codes as I am not aware of it. I just want to make module background image transparent so that the text on it looks better. Can anyone of you please suggest me how to achieve it using Divi Builder? I would really appreciate the help.

    Thanks.

    Reply
    • Haley Kramer
      Haley Kramer on June 27, 2017 at 11:09 am

      Vaibhav, to make your image transparent, you’ll need to either 1) put it into a photo editing tool like Photoshop and reduce the opacity or 2) add a opacity: .5; line of CSS to your element to reduce the opacity in half. Good luck!

      Reply
  11. Márcio
    Márcio on July 3, 2017 at 9:45 am

    Hey man great tutorial. It worked well for images.

    But how can we make it work for video background? In my section, instead of an image I added a video to the background but it is too bright. How can I add an overlay to darken a bit?

    I’m not asking how to add an overlay to a video module, it a normal section, with a video background.

    Reply
    • Nathan Duvall
      Nathan Duvall on August 12, 2017 at 5:01 pm

      Hi Márcio, it should work the same, regardless of whether or not you’re using a video background or not. Feel free to reply with a link to your site and we’ll be glad to take a look.

      Reply
  12. Sam
    Sam on August 17, 2017 at 1:45 pm

    OMG Dude Thanks so much for the code and the video!!

    Reply
  13. Kadir
    Kadir on August 19, 2017 at 6:49 pm

    Thanks so much for the code.. I have a problem though, the code doesnt work when I enable parallax in the background image of a section. Can you help ?

    Reply
    • Terry Hale
      Terry Hale on September 3, 2017 at 10:57 pm

      Hi Kadir,

      Are you having trouble getting section 3.5 above in the article to work for you? Do you have a link to the page you are working on?

      Thanks for reaching out!

      Reply
    • John Wooten
      John Wooten on January 23, 2018 at 11:39 am

      Stay tuned Kadir… we’ll have a fix for this very soon… =)

      Reply
  14. Bryan
    Bryan on October 20, 2017 at 6:57 pm

    Great work! Love your work. I did notice there is a typo for the class. gray vs grey
    In your text you have “Then change the section class to “grayOverlay”.” but in your code
    you have “.greyOverlay, .greyOverlay:before”

    Reply
  15. Brett
    Brett on October 23, 2017 at 8:02 pm

    I have used this on a blurb module with a background image that I won’t the overlay on.

    The css works but the overlay extends past the image and into the space below – between a blurb on the same column.

    I have tried removing the lower blurb and found the overlay continues to extend below the image.

    Reply
  16. Doug Ison
    Doug Ison on January 6, 2018 at 7:23 pm

    Thanks what a great help and why I love DIVI. Is there a CSS snippet to draw a diagonal color section across a page section? This would be where you have 2 colors going across to opposite coners e.g. upper left to lower right top half white and bottom half yellow ?

    Reply
    • John Wooten
      John Wooten on January 23, 2018 at 11:40 am

      Doug you can do this using Divi’s Gradient Background feature now. However we’re coming out with a video on how to do this very soon. =)

      Reply
  17. verum_est
    verum_est on January 11, 2018 at 10:56 pm

    Thanks much on this great tutorial!! Funny thing though is that when I pasted the given code with the Parallax Mode in the Theme Options, it works! But not on the main Section’s Advanced option anymore… Not sure why, but my best bet is the theme version, because I’m currently using the latest(At the time of this writing). More importantly, I think this post needs some updating on the information provided to consider versioning control.

    Reply
  18. Marrell
    Marrell on January 20, 2018 at 6:34 pm

    I’m using the latest version of Divi, and I’m sure I’m using the correct code for parallax, but I can’t get it to work at all with parallax.
    If I disable parallax it works great. Could something have changed in the latest divi version?

    Reply
  19. Robin
    Robin on June 2, 2018 at 8:43 pm

    THANK YOU! THANK YOU!! THANK YOU!!! I really needed this plugin. I tried everything, including the code. Nothing worked above my video. Y’all are AWESOME!

    Reply
  20. Dianne Emerson
    Dianne Emerson on September 4, 2018 at 2:52 am

    By reading this post now I don’t have any issue about overlays color divi section. So helpful for me. Thanks

    Reply

Submit a Comment

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

Shopping cart0
There are no products in the cart!
Continue shopping
0