Jump to content

Change background image size on mobile

Go to solution Solved by tuanphan,

Recommended Posts

On 3/12/2024 at 10:32 AM, KZBentley said:

Hi @tuanphan I'm having a similar issue; the background image of my homepage crops badly in mobile view. I've tried some of the code in this thread, but it either does nothing, or crushes the whole section into a tiny band at the top of the page. (There's text, a button, and transparent shape that's supposed to overlay the image.)

Ideally what I'd like to do is crop the width of the background image so that the girl's face is visible behind the transparent shape box. 

In other parts of the site, I've tried hiding/showing certain blocks on mobile, but I don't know if that will work for a homepage top section background image? 

(Feel like I need the disclaimer - I have very little coding knowledge, mostly just scouring forums and copy/pasting into the custom css box, so I might not have been applying the other code correctly.)

Thank you!

Site url is icanfly.squarespace.com , password is icanfly2024

Desktop View.png

Mobile View.png

You can use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="65dbdcea3d7f7d3fb9b02a31"] {
    min-height: unset !important;
    height: 55vh !important;
    margin-top: 10vh;

div#block-2aaec5703c5dd5f2a003 h1 {
    font-size: 30px !important;


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Thank you! Fixed it.

I also wanted to share this in here in case anyone else (like me) did not know😅: when setting the background image, the little white circle is the focus point for the image, and where Squarespace will zoom during responsive settings; just moving this helped with some of the cropping issues I had.


Focus point.jpg

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.