Change background image size on mobile

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

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;
}
}

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.