nsdoyle Posted July 9, 2020 Share Posted July 9, 2020 Site URL: https://www.purehomeoffice.com/aspire-1 Heya I'd like to create a section with a fixed height of the window / media screen that scrolls through all the available text / content before proceeding to the next section. I found this bit of code that I believe will do what I want, but I don't know exactly how to implement it. https://codepen.io/aakhya/pen/QJWovp I attached a video to show what I'd like to achieve. Using 7.1, btw. fixed background scrolling example.mov Link to comment
rwp Posted July 9, 2020 Share Posted July 9, 2020 (edited) Are you trying to do it to all of the sections? Try adding this to design -> custom CSS .section-background { position: fixed !important; left:unset !important; } Edited July 10, 2020 by rwp Link to comment
nsdoyle Posted July 10, 2020 Author Share Posted July 10, 2020 Can't believe it was that easy. That did the job marvelously. Thank you! rwp 1 Link to comment
nsdoyle Posted July 10, 2020 Author Share Posted July 10, 2020 Guess I spoke too soon. I tried to add another section further down the page and the image from that section takes over all the way back to the top. Link to comment
rwp Posted July 10, 2020 Share Posted July 10, 2020 Remove the code from above and give this a try: .section-background img { position: fixed !important; } Link to comment
nsdoyle Posted July 10, 2020 Author Share Posted July 10, 2020 That sort of fixed it. It's not taking up the rest of the page now, but now the second section's background image doesn't display. Link to comment
rwp Posted July 10, 2020 Share Posted July 10, 2020 (edited) You could set the background of the div manually to the URL of the image, and then hide the image tag. That's what they did in the link you posted. You would need to manually do it for each section. [data-section-id="5f0756efed03a802582b95aa"] .section-background img { display:none; } [data-section-id="5f0756efed03a802582b95aa"] .section-background { background: url('https://images.squarespace-cdn.com/content/v1/5ee0ee00a0a12e14f700c502/1594316294831-H3VJXJTZAZNJI3G2QK5N/ke17ZwdGBToddI8pDm48kBQ_OmUn0XNjqwyBYOIFwXV7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0p5uBJOnOmCWBN4JfYsIDyRB3ELHLLET9s1anQygWAMDSh6zbPa8Vo37A4r2-aOSIQ/IMG_1660.jpeg?format=2500w'); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-position: center center; } Edited July 10, 2020 by rwp Link to comment
Nolanpdm Posted December 13, 2022 Share Posted December 13, 2022 Not sure if you ever got this figured out. I just changed the "left" in the code to "center" and it works out. .section-background { position: fixed !important; center:unset !important; } tuanphan 1 Link to comment
verticalberto Posted August 14 Share Posted August 14 Hi everyone, Has anyone figured out the full code needed to have one specific section's background fixed while scrolling? The tutorials I found refer to Squarespace 7.0 or are intended to apply to all pages rather than single sections. Thanks in advance for any suggestions! Link to comment
tuanphan Posted August 15 Share Posted August 15 22 hours ago, verticalberto said: Hi everyone, Has anyone figured out the full code needed to have one specific section's background fixed while scrolling? The tutorials I found refer to Squarespace 7.0 or are intended to apply to all pages rather than single sections. Thanks in advance for any suggestions! You can try rwp comment above, it should work. If it doesn't work, please share link to your site, we can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
verticalberto Posted August 16 Share Posted August 16 (edited) On 8/15/2023 at 12:15 PM, tuanphan said: You can try rwp comment above, it should work. If it doesn't work, please share link to your site, we can check easier Thank you Tuanphan for your reply! I have tried rwp's suggestion but it's not working 😞 This is the test page i'm trying to make it work on (middle section) https://cluego-test-version.squarespace.com/test password: test Edited August 16 by verticalberto Link to comment
tuanphan Posted August 19 Share Posted August 19 On 8/17/2023 at 12:11 AM, verticalberto said: Thank you Tuanphan for your reply! I have tried rwp's suggestion but it's not working 😞 This is the test page i'm trying to make it work on (middle section) https://cluego-test-version.squarespace.com/test password: test You mean section with 3 people? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
verticalberto Posted August 19 Share Posted August 19 54 minutes ago, tuanphan said: You mean section with 3 people? Yes sir Link to comment
tuanphan Posted August 21 Share Posted August 21 On 8/19/2023 at 3:18 PM, verticalberto said: Yes sir Sorry, I forgot, background-attachment: fixed won't work on mobile (or doesn't work on iOS only). You can consider adding code for desktop, then disable it on mobile. What do you think? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
verticalberto Posted August 21 Share Posted August 21 5 hours ago, tuanphan said: Sorry, I forgot, background-attachment: fixed won't work on mobile (or doesn't work on iOS only). You can consider adding code for desktop, then disable it on mobile. What do you think? Sure I don't mind if it works on desktop only. The mobile version of the website is always less interesting anyways 🙂 Link to comment
tuanphan Posted August 23 Share Posted August 23 On 8/21/2023 at 10:04 PM, verticalberto said: Sure I don't mind if it works on desktop only. The mobile version of the website is always less interesting anyways 🙂 Change rwp code to this to force it run on desktop only, replace with your data section id & image url @media screen and (min-width:768px) { [data-section-id="5f0756efed03a802582b95aa"] .section-background img { display:none; } [data-section-id="5f0756efed03a802582b95aa"] .section-background { background: url('https://images.squarespace-cdn.com/content/v1/5ee0ee00a0a12e14f700c502/1594316294831-H3VJXJTZAZNJI3G2QK5N/ke17ZwdGBToddI8pDm48kBQ_OmUn0XNjqwyBYOIFwXV7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0p5uBJOnOmCWBN4JfYsIDyRB3ELHLLET9s1anQygWAMDSh6zbPa8Vo37A4r2-aOSIQ/IMG_1660.jpeg?format=2500w'); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-position: center center; } } Use this tool to find data section id https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
verticalberto Posted August 23 Share Posted August 23 6 hours ago, tuanphan said: Change rwp code to this to force it run on desktop only, replace with your data section id & image url @media screen and (min-width:768px) { [data-section-id="5f0756efed03a802582b95aa"] .section-background img { display:none; } [data-section-id="5f0756efed03a802582b95aa"] .section-background { background: url('https://images.squarespace-cdn.com/content/v1/5ee0ee00a0a12e14f700c502/1594316294831-H3VJXJTZAZNJI3G2QK5N/ke17ZwdGBToddI8pDm48kBQ_OmUn0XNjqwyBYOIFwXV7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0p5uBJOnOmCWBN4JfYsIDyRB3ELHLLET9s1anQygWAMDSh6zbPa8Vo37A4r2-aOSIQ/IMG_1660.jpeg?format=2500w'); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-position: center center; } } Use this tool to find data section id https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff Uhm, I'm trying to make it work adding the code to custom CSS with picture URL and section ID but it doesn't seem to do anything on dekstop preview. I got section ID from the extension you recommended. @media screen and (min-width:768px) { [data-section-id="64dd288c79c102293fd331b7"] .section-background img { display:none; } [data-section-id="64dd288c79c102293fd331b7"] .section-background { background: url('https://images.squarespace-cdn.com/content/v1/64d13969e151e619dd0c776c/7a3dd884-9ff7-4fc4-a71c-febc03b330c5/pexels-keira-burton-6146931.jpg?format=2500w'); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-position: center center; } } What am I doing wrong? 😕 Link to comment
tuanphan Posted August 26 Share Posted August 26 On 8/23/2023 at 10:12 PM, verticalberto said: Uhm, I'm trying to make it work adding the code to custom CSS with picture URL and section ID but it doesn't seem to do anything on dekstop preview. I got section ID from the extension you recommended. @media screen and (min-width:768px) { [data-section-id="64dd288c79c102293fd331b7"] .section-background img { display:none; } [data-section-id="64dd288c79c102293fd331b7"] .section-background { background: url('https://images.squarespace-cdn.com/content/v1/64d13969e151e619dd0c776c/7a3dd884-9ff7-4fc4-a71c-febc03b330c5/pexels-keira-burton-6146931.jpg?format=2500w'); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-position: center center; } } What am I doing wrong? 😕 You missing a !important text. Use this new code @media screen and (min-width:768px) { [data-section-id="64dd288c79c102293fd331b7"] .section-background img { display: none !important; } [data-section-id="64dd288c79c102293fd331b7"] .section-background { background: url('https://images.squarespace-cdn.com/content/v1/64d13969e151e619dd0c776c/7a3dd884-9ff7-4fc4-a71c-febc03b330c5/pexels-keira-burton-6146931.jpg?format=2500w'); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-position: center center; }} Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
verticalberto Posted August 26 Share Posted August 26 (edited) 8 hours ago, tuanphan said: You missing a !important text. Use this new code @media screen and (min-width:768px) { [data-section-id="64dd288c79c102293fd331b7"] .section-background img { display: none !important; } [data-section-id="64dd288c79c102293fd331b7"] .section-background { background: url('https://images.squarespace-cdn.com/content/v1/64d13969e151e619dd0c776c/7a3dd884-9ff7-4fc4-a71c-febc03b330c5/pexels-keira-burton-6146931.jpg?format=2500w'); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-position: center center; }} Sir you have my undying gratitude. After days of research this was the only way I could make it work! Thanks a ton for your contribution to this communnity 🙏 Edited August 26 by verticalberto Link to comment
GPGDesigns Posted September 6 Share Posted September 6 Hii! This works so great for me as well!! Thank youuu - wondering if there is a way to have those static background images as videos? @tuanphan Link to comment
tuanphan Posted September 9 Share Posted September 9 On 9/6/2023 at 11:46 PM, GPGDesigns said: Hii! This works so great for me as well!! Thank youuu - wondering if there is a way to have those static background images as videos? @tuanphan With video, I think you can try this (with Classic Editor section) https://stnsvn.com/blog/how-to-add-parallax-scrolling-squarespace-7-1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care 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