Changing the Background Color in Divi

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

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.

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

15 Comments

  1. 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
  2. Thanks for this code… _/\_

    Reply
    • You're welcome, John šŸ™‚

      Reply
  3. 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
  4. 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
  5. Worked great. Thank you for the help!

    Reply

Submit a Comment

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