XF 2.1 How to make header image (not logo) responsive?

[TCGMook]

I'm at my wits end here. I know its possible to do but I cant figure it out for the life of me. I'm using a header image on my site (not a logo, see image #1) and while its possible to make the header responsive in regards to width, it completely destroys the height (see image #2). I've done an hour of research, looked at others sites that have it working and I can't figure out what I'm doing wrong. How do you make the header fully responsive? I've gotta be missing something simple. I know I can set a max height but that breaks the responsive width. What am I missing? Excuse the half assed sentences. Its been a long week.

Also, I dont' even need the header image to remain once you're past the nav collapse point (mobile view). I just need it to actually resize depending on the computer screen size.

 

[TCGMook]

No luck?

 

[l3ta]

Try the following code in your style properties. I works for me:

height: 194px; background-position: center; background-repeat: no-repeat; background-size: cover;

Specify the height of your particular image in the first line of code. It should look like this:

 

[TCGMook]

I'll give it a shot later tonight and let you know. Thanks!

 

[TCGMook]

Try the following code in your style properties. I works for me:

height: 194px; background-position: center; background-repeat: no-repeat; background-size: cover;

Specify the height of your particular image in the first line of code. It should look like this:

You are my hero. I had something similar but just wasn't enough. Thanks so much!

 

[TCGMook]

So I think this only half works. The image does seem to shrink but most of the image is simply getting cut off on each side as the screen size scales down. I was hoping the entire image would be responsive. I'm terrible at describing this. I can send a link to my site if you want to take a look. Just shoot me a PM if interested.

 

[l3ta]

So I think this only half works. The image does seem to shrink but most of the image is simply getting cut off on each side as the screen size scales down. I was hoping the entire image would be responsive. I'm terrible at describing this. I can send a link to my site if you want to take a look. Just shoot me a PM if interested.

Post the image you want to use on your header here, and i will test it on my site.

 

[TCGMook]

Post the image you want to use on your header here, and i will test it on my site.

PM sent.