Hero Image Cropping – need full image height

[krtyler05]

Hi There,

I’m working on creating a single-page site for a client and have designed the top of the page to look like this:

But instead, it looks like this:

I can’t seem to figure out how to get the image to show in its full height on desktop. It keeps cropping quite a bit whenever I upload it into a section on the page, even when I upload the uncropped version of the image:

How do I remedy this?

Thank you!

– Katie

[friech]

Hi Katie,

Thank you for writing in, background-image is responsive in a different way, please follow this post, even if you make it look fit on your screen, it will still be cut on other screen-sizes especially on mobile.

Try adding 5% top and bottom padding on your Section.

If you need to showcase the entire image regardless of the screen width, then you need to add the Image as an Image element, not as a background. The downside of this though is you need to apply a custom CSS on your other elements (headline, text, button) to make those position on top of the image.

Let us know how it goes,
Cheers!