responsive header background-image cropping issue

sscraftings — Wed, 16 Sep 2026 04:51:19 GMT

Hi! I'm having an issue with the background image in the header of my Square Online website.

I uploaded a custom background image to the Header section. The image contains design elements that need to remain visible, including a small announcement banner across the top.

When I view the published website in a smaller/narrower desktop browser window, the header background displays correctly and the entire announcement banner is visible. However, when I maximize the same browser window on the same computer, Square changes the way the header background image is scaled/cropped. The top portion of the image gets cropped off, causing the announcement banner to disappear.

The issue appears to be related to the responsive scaling/cropping behavior of the header background image. The header becomes wider on a larger screen, but instead of preserving the visible area of the background image, the image is being resized/cropped to fill the header container.

I have tested different image sizes and positioning, but the problem is dependent on the browser/window width rather than the image file itself.

Is there a way to change the header background image fitting/positioning behavior, such as:

Fit/contain the image instead of cropping it
Control the background image focal point or position
Prevent the top of the background image from being cropped
Set separate desktop/mobile background positioning
Or otherwise keep the same portion of the header background visible across different desktop screen widths?

Ideally, I need the top of the background image to remain anchored to the top of the header rather than being cropped when the browser becomes wider.

I can provide screenshots showing the exact same published website at two different browser widths: one where the full header background displays correctly and one where the top is cropped off. It's also displaying what I want in the editor at times, and then open it in browser and it's way off.

The part where you see "FREE SHIPPING ON ORDERS $65+!" is part of the background image, it's the only way I could think to do that with the free version of square website - unless there is another option on being able to do that?

Thank you!

Re: responsive header background-image cropping issue

rtfulk — Thu, 17 Sep 2026 01:14:03 GMT

@sscraftings What you’re seeing is normal responsive background-image behavior rather than a problem with your image file.

Square is treating the header image as a background image, so as the browser gets wider it scales the image to completely fill the header area. That means some of the top/bottom or sides can be cropped depending on the screen dimensions.

You can try going into the header background image settings and looking for Set image subject / focal point and position the focal point toward the top where your “FREE SHIPPING” banner is. Square documents that feature as a way to help keep the important part of a background image visible as the layout changes.

However, I would not put important text such as “FREE SHIPPING ON ORDERS $65+” inside a background image. Because background images are intentionally responsive and cropped, there really isn’t a reliable way to guarantee that text will remain visible at every desktop and mobile width.

A better solution is to use Square’s Announcement feature instead. Go to Communications/Marketing → Pop-ups → Make an announcement and choose the banner-style announcement. That keeps the message as actual page content rather than baking it into the header artwork. Square says announcement pop-ups/banners are available on Free, Plus, and Premium plans.

If you keep the message inside the image, I’d leave quite a bit of empty “safe area” above and below it so cropping doesn’t remove it, but even then it may look different at different browser widths.

Here are a couple of Square documents on it.

https://squareup.com/help/us/en/article/6887-adding-pictures-to-your-square-online-store?

https://squareup.com/help/us/en/article/6956-add-a-pop-up-or-banner?

thread responsive header background-image cropping issue in Online Store

responsive header background-image cropping issue

Re: responsive header background-image cropping issue