Archived topic
On mobile the header image crops instead of scaling.
1 reply · Started by Ben on February 16, 2021
My header looks good on desktop but on tablets and mobile, the header image gets cropped instead of scaling to fit the width. Can you help me?
URL: https://ggj.98d.myftpupload.com/
Thank you!
Ben
Hi there,
I'm not sure I understand what you mean. By header image, did you mean the page-hero's background-image?
If so:
Your background-image's background-size property is set to cover.
cover value resizes the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
What happens in smaller viewports is, it covers the whole height of the container but to keep the aspect ratio, it crops/cuts the side edges of the image.
If you change from cover to contain, your images wont get cropped but the whole .page-hero container won't be covered.
While you can go for percentages values (ex: background-size: 100% 100%), this isn't good because it will distort the image as it won't keep the aspect ratio. You'll most likely have a vertically or horizontally stretched image if you use this.
That said, there's no way to avoid the background image from being cropped on narrow width viewports while keeping the whole page-hero covered without breaking aspect ratio.
