Jump to content

Centering Background On Mobile (Brine 7.0)

Recommended Posts

Hi there! 

I'm trying to increase the size of this image and center on mobile.  The website is on Squarespace 7.0 - Brine. 

Am I headed in the right direction with the code below?  If I increase the width to 325%, it makes the background full-height, but it adds a scroll bar to the right, and the image is offset.  Ideally, I'd like to have the background to be full-height and centered with the people in the image showing.


Thank you!


Screen Shot 2023-04-11 at 10.40.28 AM.png

Screen Shot 2023-04-11 at 10.46.06 AM.png

Link to comment
  • Replies 3
  • Views 183
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

I don't think you would need code to do this. You can change the focal point of a background image and when the page resizes, it will recenter the image around the focal point. So you could place the focal point (the open white circle) over the couple walking, and on mobile, that's what will be shown. Is this the answer you needed?


Feel free to email me with any customization inquiries or questions you may have!

Free Squarespace Resources: DevTools Minicourse,  11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator

Link to comment
  • 3 weeks later...

Hey Caroline!

I've been traveling and I'm now just seeing this.  Unfortunately this doesn't seem to be an option on 7.0...wish this was the case because I've done it a million times for other clients but this is my first 7.0 edit!  It's a whole different ballgame it seems.

Thanks for chiming in to help!  🙂


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.