Header image resize when website go responsive

Hello !

I’m going to use the Shapely theme. I only have one issue i would like to fix.
When I’m on my computer, the header image is fine. We can see the full image (screenshot1). But if I go to mobile or if i change my screen resolution, I only see the left side of the header. The header is not resizing by himself to see it in its full version (screenshot2).

Is it possible to fix this ? I would like to see all the time the entire header, and not only its left side.

Sorry for my english, feel free to tell me if you need further explanations,
Thank you for your help,

Nicolas

Hello,

I hope you are doing well today.

Could you please provide a link to your website so that I can inspect it?

In the meantime, please ensure that the theme has been updated vis Dashboard > Updates.

Best Regards,
Support

Hello !
Thank you for your quick answer,

Unfortunately, my website is hidden from now and I can’t make it public because it’s a topic still confidential…

It’s the last version of Shapely.

When I resize my window (manually for example), the header image (even the parallax header image on the homepage) is cropped. All the image is not resizing, we only see the left side of the image (as I showed you with my screenshot 2). In the screenshot 2, am I not supposed to have the entire image (like in the screenshot 1) ? Here I only have the left side, and all the rest of the image is hidden by the fact that I reduced the window. It’s now a problem for the mobile version or for different screen resolution.

Do you know where I can fix this in the css ? Do you know why my image isn’t resizing in the same time than the window ?

My header image are 2000px x 225px.

Thank you !

Thank you,

Hey there

This is known the issue, when you add an image like this, on the smaller screen image is still covering screen but since this is not possible to cover full-screen image is visible from the left side, i think we can help you with custom css but we need to see website, you can provide link to the page once you publish your website,
please note, its impossible to show full image on different kind of screens

Hey !

Yes, I think I resolve the problem with :
background: no-repeat center center;
(if it can help you for further question on the forum)

Now I can see the “full” image even when I resize.
I have to find the same for the parallax widget for the front page and i’m all good.

Thank you !

Hello,

For the parallax widget, you can try the same but since we cannot view the page we are limited in the CSS we can provide here.

Best Regards,
Support

Hey,
It doesn’t work for the parallax, so I managed it with the :
@media all and (max-width:550px){
.header-mobile{background-position: 77% center;}
}

@media (min-width: 768px) and (max-width: 1024px) {
.header-mobile{background-position: 77% center;}
}

And I added a css class to the parallax.

Thank you for your quick answer, and sorry if I couldn’t show you the website…

Good evening

So, is your problems finally resolved? :slight_smile:

Yes, thank you !

Ok, I will close this case now, Feel free to contact us again if you have other questions

Thanks!