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

TCGMook

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

1613189735950.png

1613189990925.png
 

l3ta

Well-known member
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:

soidJ12.png
 

TCGMook

Active member
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:

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

TCGMook

Active member
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

Well-known member
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.
 
Top