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