Hero Image Issues

Hello,

Not sure what happened, but all my hero images are like that. I’ve been fixing that for couple days and no clue at all.

Here’s the read only link: Webflow - OnePiece Work

Thank you for your time and support on this!

Best,
Kyle

Welcome to the community @Kyle_Li!

This is due to the size of the images not being large enough for your browser window and the default settings that are applied to background images. You’ll want to make sure you change the background image size to cover to make sure images that are smaller than the window width are stretched to cover the entirety of the frame—in this case, your hero banner.

It looks like this is on one of your collection pages and because you’re pulling the background image from a collection field it may not look like you have much control over the size/style, but you actually have the ability to edit this just like any other element’s background image.

Make sure you’re on the Base breakpoint, and with your .location-slide element selected (or the element that’s getting it’s background image pulled from your collection), head over to the background style properties and add a new background image:

By default nothing should change, and you’ll notice that it shows a background-placeholder.svg as the “image”, but it will actually reference the styles of your pulled collection image. Just click the “cover” option within the modal and you’ll notice that the image shifts to fill the entire width of the hero section:

Just like any other styles, you can modify the properties on the smaller breakpoints as needed if you’d like them to behave differently, but by using the Base breakpoint the style will cascade down to all of your smaller breakpoints.

That should fix the issue you’re noticing, but if you have any other questions, don’t hesitate to reach out! :+1: