How to resize a background image on mobile Squarespace
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 👇
Want a framework for designing the perfect homepage?
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.
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!
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
