When building a Squarespace website, you will often add an image to the background.

If you’re building on desktop, which I’m going to guess you are, then you’ll probably choose a horizontal image and this will look great. The problem is however that when you switch to mobile, it gets cropped to the vertical aspect ratio. This doesn’t look so great.

Thanks to the roll out of Squarespace Fluid Engine, we can now crop background images so that they appear on mobile devices how they appear on desktop, or at least so that they look how you want them to.

Watch the video

Check out the YouTube video below 👇

For example, say you add a background image of four team members standing in a row. Whilst all four would appear on desktop, when it crops to mobile it would usually crop so that only two are visible.

Thanks to Fluid Engine and the ability to manually resize images, you can make sure all four team members are shown in all their glory.

How to resize a background image on mobile Squarespace

Firstly, add your background image within the editor. If you’re using a classic section, you then need to upgrade the section to a Fluid Engine section.

Head to mobile view and you’ll now have control over the section and the ability to edit it how you want it to look. First navigate to edit section and turn off fill screen.

📩 Join the inner circle to get exclusive code updates

You can then play around making the section bigger and scaling the text to make the section look exactly how you want it to look on mobile.

Don’t forget to save and share this article if you found it useful!

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

Want more?