Jump to content

How do I make background image fit when in mobile view?

Recommended Posts

Site URL: https://www.staceytan.com/cultureally

Hi there! I have a section with a background image, on desktop it looks fine but on mobile it crops out most of the image! Is there any way to fit the desktop image to mobile view? I have tried most of the code available here and am having trouble still. There was a code that worked well but I don't know how to apply it to a specific page, and I have several pages I want to do this for. Below is the code that worked but I don't know how to target specific pages:

@media only screen and (max-width: 640px){
#page .page-section:nth-child(1) .section-background img {opacity:0 }
#page .page-section:nth-child(1)  .section-background {
background-image: url(your-image-url-here);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}

Screenshot 2022-04-13 at 11.12.05 PM.png

Screenshot 2022-04-13 at 11.11.17 PM.png

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

On 4/13/2022 at 10:15 PM, whatstaceface said:

Site URL: https://www.staceytan.com/cultureally

Hi there! I have a section with a background image, on desktop it looks fine but on mobile it crops out most of the image! Is there any way to fit the desktop image to mobile view? I have tried most of the code available here and am having trouble still. There was a code that worked well but I don't know how to apply it to a specific page, and I have several pages I want to do this for. Below is the code that worked but I don't know how to target specific pages:

@media only screen and (max-width: 640px){
#page .page-section:nth-child(1) .section-background img {opacity:0 }
#page .page-section:nth-child(1)  .section-background {
background-image: url(your-image-url-here);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}

Screenshot 2022-04-13 at 11.12.05 PM.png

Screenshot 2022-04-13 at 11.11.17 PM.png

It looks you have figured it out. Do you still need help?

image.png.5b455b6d8944f473125922745e51bb73.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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.