Full width image for the header instead of just a solid?


I am wondering if there is a way to make an image full width of the header/screen instead of using just a solid color with the logo inserted and still have the header act the same? By having the header act the same I mean, when you scroll down the page the header shrinks a little and becomes transparent.

Thank you for your time in advance. :relaxed:


I’m not sure what exactly you want to achieve, can you please provide some explanatory screenshots?

Kind Regards, Roman.

Thanks for replying Roman.

I couldn’t figure out how to insert a screenshot here, but you can see the header at www.universaltherapeuticservices.com

The header so far is just that plain mustard-ish color with the site logo and links. What I would like to do is put an image in the header that spans the full width of the header to spice it up a little.

I love how the header acts when you scroll and the header shrinks a little and then goes transparent. I’m wanting to add my own header background image, but am wondering if it’s possible to do so and make the image the full width of the header without messing with how the header acts.

Thanks again!


The 2nd one is the one I’m trying to accomplish.

Just saw all I had to do was drag the image over. Derp! :blush:


Hello, do you still need help?

Kind Regards, Roman.

Yes, I do need help with this.


Please provide a link to the image that you want to use.

You might want to upload that image to your WordPress Media Library first.

Kind Regards, Roman.

Here’s the link to the image: http://universaltherapeuticservices.com/wp-content/uploads/2018/01/uts10.jpg

Thanks much Roman.


You can try to use the following CSS code, but you might want to use background image without logo :slight_smile:

You can add CSS code in Dashboard → Appearance → Customize → Additional CSS.

#masthead {
    background-image: url(//universaltherapeuticservices.com/wp-content/uploads/2018/01/uts10.jpg);
    background-size: cover;
    background-repeat: no-repeat;

Kind Regards, Roman.

Oh wow! Yay! That worked. Thanks so much.

Is there a way to make it go transparent when you scroll, like how the default header does?

Thanks Roman, I really appreciate it!

Hello, you can try to use slightly transparent .png background image instead of your current .jpg background image.

Kind Regards, Roman.

Awesome! I’ll give it a shot. Thanks so much for your time and help, it’s much appreciated.

You are welcome! :slight_smile:

Kind Regards, Roman.