Adding a Semi-Transparent Background to the Divi Header

Written by Dan Mossop

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.

Streamline Your Divi Workflow!

Copying images and content directly from your clipboard into Divi has never been easier. Say goodbye to the cumbersome save-and-upload routine and hello to streamlined efficiency. Perfect for quickly iterating on CSS design changes like adding backgrounds and tweaking transparency in your header designs.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

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

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 *.

We may earn a commission when you visit links on our website.

Latest From Divi Booster

Enable Automatic Looping for YouTube Videos in the Divi Video Module

Enabling automatic looping for YouTube videos in your Divi video module ensures that content plays seamlessly and continuously without interruption. This feature can enhance user engagement, highlight key information, or create dynamic visual effects on your website....

Hide Video Controls in Divi Video Module

Disabling YouTube video controls in the Divi Video Module helps create a seamless, distraction-free viewing experience for your site visitors. This approach is useful when you want full control over how your video content appears and is interacted with on the page, or...

Mute YouTube Videos by Default in the Divi Video Module

In the Divi Video Module, starting your YouTube videos muted by default can create a more user-friendly browsing experience on your webpage. It is particularly beneficial for reducing distractions, enhancing visitor engagement, and providing a seamless content preview...

Autoplay Videos in Divi Video Module

Enabling videos in your Divi video module to start playing automatically can enhance both the site's design and user engagement. To ensure full compatibility with browser requirements, such as Chrome's autoplay policy, it's often necessary to start your videos muted...

How to Add the Post Status in Divi's Dynamic Content

Divi's Dynamic Content feature is great for enhancing your post/page templates with post-specific information. While Divi includes an option to show information such as the Post Created Date using Dynamic Content, there is no equivalent option for the Post Status....

Random Divi Posts