How To Put a Background Image in the Divi 4 Header
In this Divi 4 tutorial, I show you how to put a background image or repeating texture in your Divi 4 header! It’s a nice little trick to have in your back pocket when a client wants an image in the header and with this method, we’re not using any extra plugins or bloated features. Just a little CSS and Divi 4 magic and you’re on your way in less than a few minutes. Enjoy and let me know if it helps you out! – Josh
Here’s the CSS I used:
[css]
/*—————Header Texture—————*/
#main-header {
background-size: initial;
background-repeat: repeat;
background-image: url(INSERT URL HERE) !important;
}
[/css]
Are you ready to BUILD and GROW your web design business?
I've created a FREE 10-STEP ACTION PLAN to help you fast-track your web design success.
Very clear tutorial.Thanks for this Josh 🙂 Please please do more tutorials 🙂
Thanks, Kirb! Many others in the works 🙂
Perfect!
Josh, with a little girl of my own I can’t imagine what you went through during those two months. I’m sorry you had to experience even a minute of that. But SO thrilled to hear that all is well. It’s great to have you back and thank you so much for the incredible value!
Thank you so much for the thoughtful comment and support, Jason! Much appreciated.
Awesome trick, thank you !
Thanks for the feedback, Rostane!
thanks Josh! Wish your daughter get well soon !
Thank you very much, Siva!
As always, a great tutorial.
Glad to hear you and your family are well.
Thank you, Joe!
Thank you for this tutorial, Josh. It may come in handy for me one time. 🙂
Great to hear!
Josh, thank you for this and your many tutorials. Wishing you and your family all the best.
Thank you, Susan!
Hi. Thanks for the tutorial. Do you know how to hide this background on mobile?
or how to assign id or class?
Thanks
Ah good question. Yeah you could do@media (min-width: 981px) {
#main-header {
background-size: initial;
background-repeat: repeat;
background-image: url(INSERT URL HERE) !important;
}
}
That should make it only appear on desktop. Hope that helps! And works 🙂
Dear Josh,
Your tutorial ivery helpful as usual 🙂 thank you for it!
Could you please provide the code for “Sara’s Sewing Shed” background image?
I need a similar thing: a responsive montage in the header with a logo in the middle. Somehow I can’t figure out the right settings…
Thank you very much for your help.
Kind regards,
Rita
Hey Rita, the code for that site is
-moz-background-size: cover; -webkit-background-size: cover; background-size: cover; background-position: top center !important;(you can use my inspect element tutorial to see how to find that) and that’ll help if you have a header with one image. Cheers and hope that helps!
Dear Josh,
Thank you for your help, it works perfectly!
I try to use inspect element but not always succeed….
Kind regards,
Rita
Awesome to hear, Rita. Here’s my tutorial on Inspect Element if that helps you out!
Dear Josh,
I’m learning something every day…
After implementing your code and a silly little montage by me on the dev. site, I realized that the menu bar doesn’t turn white on scroll even though I defined the colour under Fixed navigation options in Theme customizer. Is it because I use an image?
Is it possible to fix this somehow or put in a different background image when scrolling?
On “Sarah’s Sewing Shed” the menu isn’t fixed so I couldn’t use inspect element 😉
I really appreciate your help.
Kind regards,
Rita
Hey Rita, yeah you nailed it. You can probably change the image by adding .et_fixed_nav #main-header in there to make sure it overwrites the color! Or just turn that color off.
Where would I put this in the editor? style.css? It is working when I put it in on my “inspect element” on the browser, but I can’t see where to edit the style.css file.
Here you go! https://joshhall.co/where-to-put-your-custom-css-in-divi/
Found your video on Youtube. It was incredibly helpful. Much appreciated. The only thing is that the edit is not appearing on mobile devices. Doesn’t make sense. Any thoughts?
Disregard last comment. Just took awhile longer for mobile to refresh after Cache refresh.
Perfect, solved my Problem totally! Thanks a lot Josh and many Greetings 😉
I needed a Solution to only show a covering custom Background on Mobile Devices, used this Code:
@media (max-width: 981px) {
#main-header {
background-size: cover;
background-repeat: repeat;
background-image: url(INSERT URL HERE) !important;
}
}