[Resolved] Why does Headings affect the cropping of the background image?

[Carsten]

Hi there, why does Headings affect the cropping of the background image (1920×1280)?

The more headings and text I add to the container block, the more cropped and enlarged my background image gets on my phone, why?

If I crop the image to fit the phone screen (768×1280), it gets even worse?

I want to preserve the framing of the image, so as much of the image is displayed, like it is, before text is added?

Thanks!

[David]

Hi there,

Background Images are set by default to Cover the container they are added to. This means the image always fills the space, but images will not be 100% displayed unless the containers aspect ratio matches that of the original image.

For Full Width Containers only – we can set an empty containers aspect ratio to match that of the image by using % top padding.
First calculate the original image aspect ration: Image Height / Image Width * 100 = %aspect ratio

eg. 1280 / 1920 * 100 = 66%

Now we can set the Top Padding ( or combined top and bottom padding ) of the container to 66%. This will now maintain the original aspect ratio and show the full image on all screen sizes.

However this only applies to an empty container that is spanning the full width of the browser.

When adding content to a container – the content now introduces height to container, and the height it adds will be variable based on screen size ie. narrower screens will force text to wrap to more lines further increasing its height.

The reality here is you cannot make a landscape image fill a portrait container without either some of the image being cropped or there being a lot of whitespace.

There is not automatic or simple way to correct this especially across all screen sizes.

[Carsten]

Hi there, thanks for your thorough explanation

The reality here is you cannot make a landscape image fill a portrait container without either some of the image being cropped or there being a lot of whitespace.

That sounds like logic, but why is the issue then even more pronounced if I crop the image to fit portrait, like the example attached?

Thanks!

[David]

Is the background attachment set to fixed ?

[Carsten]

No it’s not, but it is only an option for the cover block, not the container?

[Carsten]

But the question is, how I should scale an image 1920×1280 to fit horizontal best, apparently 768×1280 is not the way to go?

Thanks

[Carsten]

I think I just leave my Headings outside the container, to avoid the cropping.

Thanks!

[David]

Glad to hear you found a solution!

[Author]

Posts