Jump to content

Recommended Posts

Sure, You can do that. Here is the updated code. Replace the data-section-id with yours. 

[data-section-id="123"]{
  .section-background{
    &::after {
    /*creating the element*/      
      content: "";
      width:100%;
      height:100%;
      position: absolute;
      
      /*adding the image*/  
      background-image:url(image.jpeg);
      background-repeat:no-repeat;
      
      /*positioning the image*/  
      background-size:cover;
      background-position:center center;
      background-attachment: fixed;
      
      /*mobile*/  
      @media(max-width:787px){
        background-position:center center;
        background-attachment: fixed !important;
      }
    } 
  }
}
Link to comment

Hey @Shadmon thanks so much! However, it doesn't work on iOS devices (ipad & mobile) - sorry, I should've been more specific! 

 

Do you have any workaround for this? 

 

Many thanks! 

 

 

Link to comment

Hey @tuanphan I understand it is not possible with the Will myers code, but I found a website (linked above) that does allow it  to work on mobile. Wondering if you know how I can make it work on mobile?

 

Thanks!

Link to comment
On 5/7/2024 at 7:20 PM, Gigi-C said:

Hey @tuanphan I understand it is not possible with the Will myers code, but I found a website (linked above) that does allow it  to work on mobile. Wondering if you know how I can make it work on mobile?

 

Thanks!

I see they used JavaScript code, But I could not check the exact code/or plugin they used

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
  • 3 weeks later...
On 5/9/2024 at 4:55 AM, tuanphan said:

I see they used JavaScript code, But I could not check the exact code/or plugin they used

I am also trying to get background-attachment: fixed to work on IOS. I’ve been scouring the internet trying to find a solution and came across this post: https://kriesi.at/support/topic/colour-section-background-image-mobile-responsive-issue/#post-1262283

You can also see his test here:  https://webers-testseite.de/donkey/ which works perfectly on my IOS.

I am wondering on how to adapt this code to Squarespace (I am not a CSS expert). 

This is the code he is using:

.bg-fixed {
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
  background-size: 0 !important;
  overflow: hidden;
  position: relative;
  top: 0;
}

.bg-fixed:after {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: inherit !important;
  background-repeat: no-repeat !important;
  background-size: cover;
  background-position: inherit;
  pointer-events: none;
  z-index: -1;
  visibility: visible !important; 
}

Here is a link to my test page: https://www.lucasano.com/test-3

The section ID I want to set the background image to is:
section[data-section-id="6657842d665515262f9f5e36"]

And the URL for the background is: https://static1.squarespace.com/static/660dabf2c74e425529726520/t/662252cc3539fd50ece45305/1713525454099/Sample+image+4.jpg

Thanks!

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.