Home Hero Section Image Size

[Carly Gardner]

Hello,

I’m using a 2400×1513 image on my home page as the hero image and it looks great. However, on some other pages I am using the hero section ‘small’ height to put some images at the top of each page. For that I use:

#hero-section.small-height {
max-width: 100%;
height: 480px;
}

To keep these images from cropping at different screen sizes, I switched to Cover instead of Contain:

#hero-section {
overflow: hidden;
background-size: contain;
background-repeat: no-repeat;
margin-bottom: 20px;
background-position: center top;
}

After doing that, everything is great on the whole site except for the home page image (2400×1513) which is now showing up too small. Is there a way to isolate just the home page Hero image and reset that size?

Thanks,

Greg

[Bill Robbins]

Hi Greg,

The “contain” image size means the the entire image will always be shown. It’ll be scaled down without any cropping. Since the height is rather small compared to the size of the image, it’ll be scaled down considerably.

I would probably go with a much shorter image on that page. Say something around 2400 pixels tall by 600 pixels tall or so.

Another thing you could experiment with a bit is using a percentage height for the hero section instead of a fixed height. That way the height will be a bit more proportional. That might look like this:

#hero-section.small-height {
height: 30vh;
}

The “vh” there is the vertical height of the browser window. Another variation of that is to use vw (vertical width) so that the height of the hero is tied to the width of the browser. Both can give good results; they’re just a bit different in how they determine how tall to make the area.

Let me know if I can help.

Have a great weekend,
Bill

[Carly Gardner]

The vw seems to work pretty well for me. Unfortunately my client very much wants the large image on the home page. Thanks again for all your help!

[Bill Robbins]

Good Morning Greg,

So sorry. I believe I misread what you were asking when you first posted. Instead of changing the background size on #hero-section to contain, leave that as cover. Then modify your #hero-section.small-height to be like this:

#hero-section.small-height {
max-width: 100%;
height: 480px;
background-size: contain;
}

That way only the small height gets the contain option. With the main #hero-section style set back to cover, that should change only the small one to contain. Feel free to still use the vw or vh width if you’d like to.

See how that works out now,
Bill

[Carly Gardner]

That works great, thanks!

[Bill Robbins]

Fantastic 🙂

[Author]

Posts