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!
@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?
