Adding a Semi-Transparent Background to the Divi Header

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

If you'd like to add a semi-transparent background to the Divi Theme header bar, you can do so by adding the following CSS to your theme:

#main-header::after {
    content: "";
    background-image: url('myimage.png');
    background-size:cover;
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

Just replace 'myimage.png' with the URL of your desired background image.

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

11 Comments

  1. Hey Dan not sure where iv gone wrong i added the code to my css for my header text and subheader text, nothing happened

    Reply
    • Hey Roy, the problem is that the code above is for the Divi header bar (i.e. the navigation bar), not the Divi full-width header module, so it won't work for you. I had a quick play around and putting the following code into the "Header Container" box in the module's Custom CSS tab seems to do a reasonable job of adding a semi-transparent background to the full-width header module's content:

      background-color: rgba(0,0,0,0.5); border-radius: 4px; max-width: 800px;
      

      Hopefully it's at least a start in achieving the effect you are after.

      Reply
  2. Hi – I am SUPER new to everything wordpress and Divi is extremely useful in helping me build my site 🙂 I just dunno where to place this bit of code.. do I place it in the syle.css area?

    Many thanks 🙂

    Reply
    • Hi Aki, there are a few possibilities. The easiest for you would probably be in the Divi custom CSS box, which you can find from you WordPress dashboard at "Divi > Theme Options > General > Custom CSS". Just add it to the end of anything already in that box, on a new line. If you know you are using a "child theme", you should be able to paste it into the child theme's style.css file. I wouldn't put it directly into Divi's own style.css file, however, as this will be overwritten whenever Divi is updated. This post explains things a bit more:

      https://divibooster.com/adding-css-to-the-divi-theme/

      Reply
  3. Brilliant! Googled 1st before opening Firebug. Ahh my coffee addiction is residing (for now) This worked beautifully.
    Thank You.

    Reply
  4. I tried that and nothing happened.

    My client really wants me to put the image I have right below the main header in the header. You would be a lifesaver if i could somehow figure out how to add an image to the header. I can't believe how difficult it has been to try to do this.

    Reply
  5. Thanks for this wonderful tutorial.
    I've added a semi transparent background as per instruction but I am not seeing the changes when viewed on a mobile device. Any idea on how to fix this?

    Reply
    • Hey Jason, any chance you're able to provide a link to the side you're working on, so that I can take a look? Also, what mobile device are you testing on?

      Reply

Submit a Comment

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