Hero image has huge top and bottom gap

[Ivee]

Hello,

I tried to add a hero image on the background of the section. For it to show the way I wanted, I used the inline CSS of “Height: 50vh;”

It’s perfect for monitors with a large resolution. Once it gets smaller like with Tablets or mobile, it leaves a huge gap top and bottom. Whats the best way to fix or maybe do the Hero image? I have it set as Contain & Center.

Respectfully,
Ivee

[friech]

Hi Ivee,

Thank you for writing in, first, your background-position should be set as cover not contain, that is the reason why you get that white gap top and bottom.

Then you need to realize that a landscape-oriented image will not fit on a portrait-oriented container (mobile portrait), that is where the background-position CSS property comes in, so you can focus a portion of the image if needed.

Cheers!