Gigi-C Posted May 3 Share Posted May 3 URL: coucoustudiony.com pw: CCS24 Hello, I was wondering if anyone has a work around for the mobile version of this @WillMyers code for a parallax effect. https://www.will-myers.com/adding-parallax-effect-to-a-background-image-in-squarespace-71 I've seen it's possible on mobile as this website have it on mobile(maybe it's a testimonial thing?) https://thesocialagency.dk/ Thank you in advance! Link to comment
Shadmon Posted May 3 Share Posted May 3 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; } } } } yasabu_jemi40, tikazi-xutu40, nayu_vuhido75 and 1 other 1 1 2 Link to comment
Gigi-C Posted May 4 Author Share Posted May 4 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
Shadmon Posted May 4 Share Posted May 4 Thank you for letting me know. It might not work as expected on iOS devices due to their rendering engine. Can you send me your website URL so I can provide a solution? Thanks. Link to comment
Gigi-C Posted May 5 Author Share Posted May 5 @Shadmon Yes of course, www.coucoustudiony.com pw: CCS24 Thanks! Link to comment
tuanphan Posted May 7 Share Posted May 7 background-attachment: fixed; won't work on iOS, you can consider disable effect on mobile. Detail: https://forums.developer.apple.com/forums/thread/99883 Gigi-C 1 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
Gigi-C Posted May 7 Author Share Posted May 7 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
tuanphan Posted May 9 Share Posted May 9 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
LukeDesign Posted May 29 Share Posted May 29 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment