Jump to content


  • Posts

  • Joined

  • Last visited

JesseTachibana's Achievements

Level 1

Level 1 (1/20)



  1. Site URL: https://thunderfoxmusic.com Hi, I'm pretty new to Custom CSS and have been using it based off the advice found on forums. I'm trying to display a different fixed position background image for desktop and mobile for viewing optimisation. I've managed to get it working on desktop, and I got it working on mobile by placing a mobile-friendly background image behind the original background image, then coding for the foreground image to be transparent when viewed on mobile. It works fine in the mobile preview in the site builder, and it also works fine viewed on android phones. It doesn't, however, appear to work on iPhones which just display the desktop optimized image but zoomed in significantly. I've attached a screenshot of the view from an android (the one which fits the screen) and the view from an iPhone - below is the code that I'm using to achieve this (NOTE: I changed the 'max-width' paramater from 767 px to 950 px as I thought this might solve the issue but it hasn't. It also hasn't messed up the android view) [data-section-id="5e4e0b259625b1547470a01f"] .section-background { background-image: url("https://images.squarespace-cdn.com/content/v1/5e4ce6ee2218e34cd31829d3/86c35289-8a3c-49d4-9d77-82583188abdf/ke17ZwdGBToddI8pDm48kHsP6h8ITLpzppVA9b8GOgt7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UQnys2-58Jn-eukW1UFae4kMRF6JsQQSjrbz6STkd2Ul9Aa7pjcgczeZz4RiAJynZQ/standing+seamless.jpg"); background-size: cover; background-attachment: fixed; } @media only screen and (max-width:950px) { [data-section-id="5e4e0b259625b1547470a01f"] .section-background img { visibility: hidden; } [data-section-id="5e4e0b259625b1547470a01f"] .section-background { background-image: url(https://static1.squarespace.com/static/5e4ce6ee2218e34cd31829d3/t/60ca068e80d4337c06eb2e36/1623852694300/standing+seamless+3to5+vertical+smaller.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; } } Thank you!!
  • 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.