How to Create Color Overlays for Divi Sections

by | Jan 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.

Check out the video above to learn how to implement the overlay effect in Divi today! We use ANTHEM in the video for demo purposes, but this will work on any Divi site.

before the overlay

after the overlay

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: the trusty ol’ 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”.

gimme that 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 5: 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!

Stay Fly,
Superfly Squad


You can use this trick on any Divi site! But if you like the demo we used, it’s called “ANTHEM” and it’s pretty fly if we may say so ourselves…

by Jake Kramer

Jake is a director and handles creative at Artillery Media, based in Lincoln, Nebraska. His strengths shine in strategy, communication, and organization. He has a passion for the problem-solving aspect of design and the challenges it brings. Jake holds a bachelors in marketing from the University of Nebraska-Lincoln and a minor in music. He can be found on the court playing a pickup game, on the road playing guitar and fiddle, or at his desk crafting.

more posts

61 Comments

  1. Pete

    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

    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. Steve Cooper

    Absolutely brilliant!

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

    Reply
  4. Raquel

    Genius! Cheers dude

    Reply
  5. Javier

    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

      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

        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;

        The website link is this: https://idc.marusca.tech/
        Thank you in advance!

        Reply
        • Nathan Duvall

          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
      • KC Clark

        Hi Nathan,
        I’m trying to do the same thing here > http://thequiltsong.com/#the-song. I want to add an rgba (0, 0, 0, 0.43).

        Is this possible? I’ve tried adding a code you suggested here, but it doesnt seem to be working.

        Thanks,
        KC

        Reply
        • Jake Kramer

          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

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

    Thanks in advance
    Allan

    Reply
    • Nathan Duvall

      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

    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

      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

        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

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

          Reply
          • KL

            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

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

    Reply
  9. Bethan Arundel

    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

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

      Reply
      • Robb

        Hey Nathan,

        I am having the same issue as Bethan Arundel. The code works on static images. It does not work on parallax. Here is a page I am having the issue with.

        https://purposecenterchurch.com/giving-robb/

        Reply
        • Terry Hale

          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

    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

      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

    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

      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

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

    Reply
  13. Kadir

    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

      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

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

      Reply
  14. Bryan

    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

    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

    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

      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

    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

    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

    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

    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 *