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.
We may earn a commission when you visit links on our website.
Customizing the hover color of menu links lets you enhance the user experience and maintain visual consistency with your website’s brand. By setting a specific hover color, you can guide visitors' attention and improve navigation feedback. In this guide we show you...
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....
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...
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...
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...
Hey Dan not sure where iv gone wrong i added the code to my css for my header text and subheader text, nothing happened
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:
Hopefully it's at least a start in achieving the effect you are after.
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 :)
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/
Thank you for this so much! It worked great on this website we are redeveloping: http://altovineyards.net
Brilliant! Googled 1st before opening Firebug. Ahh my coffee addiction is residing (for now) This worked beautifully.
Thank You.
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.
Hi Sylvia, I'm not sure if the site linked in your username is the one you're working on it, but if it is I think I might have spotted the problem. I see there you're trying to add the following URL as a background image to the header (in your custom CSS):
http://us501.directrouter.com/~hvqkdfhi/?attachment_id=875
However, attachment links like this are actually a link to a page about the image, rather than the image itself. The direct image URL is actually:
http://us501.directrouter.com/~hvqkdfhi/wp-content/uploads/2015/11/WebsiteHeader3-1200×96.jpg
I think if you use that URL instead you should find that the code above works. Let me know if not, though…
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?
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?
Wow! Perfect. Just what I was looking for. Thanks so much! Using it on https://pitchperfectroofingllc.com/ for a client.