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.
Assigning unique CSS IDs to specific Divi Accordion items allows for precise control over styling, targeting, and linking within your page content. This ability is particularly useful when you want to apply custom designs or create anchor links to particular accordion...
Enabling swipe navigation in the Divi Gallery module's lightbox allows users to seamlessly browse through gallery images by swiping left or right, creating a more interactive and mobile-friendly experience. This functionality can significantly improve user engagement...
Control how images appear in your Divi Gallery module by toggling the slide-in animation effect for grid layouts. Disabling the slide-in animation allows gallery images to load instantly and appear statically, providing a faster and distraction-free browsing...
Displaying or hiding the image count in the Divi Gallery module’s lightbox can help customize the user experience, depending on whether you want to give visitors an indication of gallery progress or prefer a cleaner, distraction-free view. The ability to toggle this...
Displaying image titles in the lightbox overlay of the Divi Gallery module can sometimes be distracting or unnecessary, depending on your website’s design and user experience goals. Hiding these titles creates a cleaner and more focused viewing experience for visitors...
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.