Changing the Background Color in Divi

To change the background color in the Divi Theme, you can do so by adding CSS to Divi, like so:

#main-content {
    background-color: green !important;
} 

This will set the background on the main content, but leave the header and footer untouched.

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

22 Comments

  1. my background does not show in theme builder. I mean I have created "All Achieve Pages" in theme builder and when I view the archive page background image appear in header and footer but it dose not show in main body?
    if anyone can help me.

    Reply
    • Hi Dorji, I suspect it will be something similar to the problem I describe in this post:

      https://divibooster.com/change-the-post-content-module-background-color/

      Basically, there will likely be some sections (or maybe modules) in the template which have a white background set, which is blocking the background image from being visible.

      If you're able to share a link to the page you're working on, I'll be happy to take a look and hopefully give you a more specific answer. Thanks!

      Reply
  2. Dan – Thanks for that last reminder on section backgrounds… Made the earlier changes work like a charm…

    Reply
    • You're welcome, Todd!

      Reply
  3. uhhh my backround color wont change!!!

    Reply
    • Hey lil peep, any chance you're able to share a link to the page you're working on, so that I can take a look for you? Also, note that if your sections are as wide as the screen, you'd need to set the background color in the section settings instead. The code above is for the area not covered by the sections. Cheers!

      Reply
    • Try this one:

      .et_pb_section {
      background-color: #FBFBFB
      }

      Reply
      • Thanks for that muhamed! For anyone who's interested in the difference, this code sets the background color on each section whereas the code in the post above sets it on the content area of the page (everything except the header and footer). There are some slight differences in how these will behave. In most cases they'll cover the same area, since sections often cover the entire content area, but in a few cases they won't. For example, in a standard post, the post title area isn't contained within a section and won't be covered by the section background color. Also, the section background color will display in front of the main content background color and as a result may work in some cases where the main content doesn't. For best results, it may make sense to use both pieces of code together.

        Reply
        • THANK YOU! This worked great for me!

          Reply
  4. Thanks for this code… _/\_

    Reply
    • You're welcome, John :)

      Reply
  5. I'd like to change the lightbox background from gray to white for DIVI. This is the background when I click on one of the picture on a Gallery page which pops up the image and the background behind the image is gray, which I want to change to white. Please help. Thank you.

    Reply
    • Hey Ben, try this:

      .mfp-bg { 
          background-color: #fff !important; 
      }
      .mfp-close, .mfp-title, .mfp-counter, .mfp-arrow:after { 
          color: #333 !important; 
      }
      

      It sets the background to white, and then makes the various arrows, text, etc, darker so that they can still be seen.

      Reply
      • Hi Dan,

        Thank you much for posting this. However, pardon me, but I am not too familiar with where to put that code? Could you please be a bit more specific where should I put this code?

        Appreciate your help.

        Reply
      • Hi Dan,

        It is working now. I pasted your code to the DIVI General configuration section in the Custom CSS code.

        Thanks very much for your help and Happy Holidays!

        Reply
        • Hey Ben, Iā€™m glad you were able to figure it out. Happy holidays!

          Reply
  6. Did not work!??

    Reply
    • Hi Maggie, this still seems to be working for me. Is there any chance you can send me a link to the site / page you're working on so that I can take a look and see if I can post the problem? Thanks!

      Reply
      • Hi Dan,
        It's not working for me either. I've just updated to Divi 3.0.92 and added the CSS to the child theme. There's not much to look at, but the site is http://www.virtual.becwaterhouse.com.au/blog/
        Thanks.

        Reply
        • Hi Bec, the background color is actually being applied. However, your page is filled with a section that is setting its own (white) background. If you edit that section and set the background color to be fully transparent, the background color set by the CSS will show through.

          Reply
  7. Worked great. Thank you for the help!

    Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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