How do I get the full image to show in the hero

Hi Ian,

Try set the background image size to contain instead of cover.

Let me know :)

That worked for the height but now the sides don't extend to the full width.

It also seems to push the image outside of the container on mobile?

Yea, it's tricky to have background image to show the full image, especially it has to apply to different devices as well.

I would recommend use image block instead.

Ok, thanks Ying. Can you extend that to the full width and height of a container?

Hi Ian,

As Ying mentioned, this is tricky to do because of the viewport changes.

We can't keep the aspect ratio while making it cover the whole header area for all viewports because the viewable header area will vary depending on the viewport size.

That said, here are the options.

You either:

- Cover the whole header area w/ the background image and keep its aspect ratio. (cropping will occur)
- Cover the whole header area w/ the background image and ignore aspect ratio. (The image will look stretched. usually undesirable)
- Make the background to "contain" to keep the whole image viewable inside the header area while keeping the aspect ratio aswell. (This is what Ying initially suggested. it won't cover the whole header area. negative spaces will appear as you saw.)

Or as Ying mentioned too, is the image block.

But this is going to be tricky and may have performance effects because what you'll have to do are the FF:

- Make the image block full-width of the page.
- Make the overlaying text and buttons blocks position: absolute; and play around with the top, left, right, bottom values to position it.

This is done because the Image block will get as much DOM space as it needs to make sure no cropping occurs while keeping its aspect ratio and covering the whole width of the page. But the downside is, you'll have to do position: absolute; to the overlaying objects and that's the tricky part.

Thanks for detailing those options for me Elvin. I’ll have a play and see what I can come up with.

No problem. :D