"Responsive" header image distorted when switching between desktop and mobile

Shapely
1

Hi everyone,

I have alread scoured the interweb and your support forum. Pulled out many hairs and screamed at many walls. I am at my wits end. I am helping my other half with her travel blog, but i cannot for the life of me get the header image to not distort when i switch between mobile/desktop. i hope the attached screen shots make my request make sense. I have tried many different image dimensions (The recommended 1900x225 just does not work for either). i end up making it look great for one version of the site, but as soon as i switch it gets messed up. Someone please tell me im being a wally and point me in the right direction.

PS i have used the numbered images to make it obvious of the distortion.

Many thanks in advance

2

Hello there,

I hope you are doing well today.

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

Best Regards,
Support

3

Sure. It’s https://www.travellikeher.com

4

Hello there,

I hope you are doing well today.

The issue here is the image is a bit too small for larger screens so if the image is stretched to fit a bigger screen it will loss quality. Do you have a larger version of the image to replace it with?

Best Regards,
Support

5

Thanks for the advice. I have updated the image to one of the recommended dimensions (1900x225). This is the final image that we would like however you will see that on the mobile site it is not at all visible and on the desktop it is oriented way off to the right.I have also attached a copy of the actual image if that is of any use to you.

Many thanks
Tom

6

hey there

Please add this CSS in appearance - customize - additional CSS

.header-image-bg {
background-position: center center;
}

Thanks!
Colorlib Support Team

7

Thanks! The CSS code worked great for centering the image, however it appears that it is still not being resized correctly when switching to mobile. the edges are cut off.

Many thanks
Tom

8

hi Tom

You cant avoid this because this is impossible to perfectly fit one image for desktop and for mobile devices without resize or crop and when that image has texts on it, basically this is maximum we can do in this case :slight_smile: