couper37 Posted February 23 Share Posted February 23 I've been using this code for quite a while to lock a background image so sections will scroll on top of it: section[data-section-id="61648de19966687b1e24e7d0"] .section-background { position: fixed; scale: 100%; } But since I've started using the Fluid Engine this code no longer works. (Yet another issue caused by the F.E.) Anyone have any clues as to why or the solution? https://pelican-guitar-ewar.squarespace.com/ P: fire Thanks. Link to comment
Ziggy Posted February 23 Share Posted February 23 That code seems correct and should work. What section are you wanting it to apply to, I can't see that section ID on the page you shared? Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
couper37 Posted February 23 Author Share Posted February 23 I'm wanting to lock the background image on the first "home" section (the mountains). Link to comment
couper37 Posted February 23 Author Share Posted February 23 I think this is the proper section: <section data-test="page-section" data-section-theme="black" class='page-section has-section-divider full-bleed-section layout-engine-section background-width--full-bleed section-height--small content-width--wide horizontal-alignment--center vertical-alignment--middle has-background black' data-section-id="63e2f8ca06e7cd325235639d" Link to comment
Ziggy Posted February 23 Share Posted February 23 The section ID for that part of the website is: section[data-section-id="63e2f8ca06e7cd325235639d"] So you may need to update your CSS to this: section[data-section-id="63e2f8ca06e7cd325235639d"] .section-background { position: fixed; scale: 100%; } Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
Solution iamdavehart Posted February 23 Solution Share Posted February 23 it's not to do with fluid engine. it's to do with squarespace recently putting in fancy dividers between sections. (you are using these in this site, but even if you don't use them the element structure has changed). The section-background element is now inside a section-border element rather than being a direct child of the main section element. the bug here is quite subtle though, normally a fixed section like this would be done relative to the viewport and therefore a new parent element shouldn't cause a problem here. However, in their implementation of the fancy borders, they use a css transformation to bring the section border to the front and these are processed at a different point by the browser. this CSS transformation on the z-axis actually negates your fixed positioning. the solution may not be immediately trivial, as it will depend on whether you want to keep your section borders or not. Turning them off may make a difference, moving your css rules to the border container may make a difference but you will need further rules to sort out your z-indices. I'd try turning off the section dividers first... Dave Hart. Software/Technology Consultant living in London Link to comment
couper37 Posted February 23 Author Share Posted February 23 Thanks iamDaveHart! The dividers were the problem. I guess I have to pick between the two...locked BG or dividers. Link to comment
iamdavehart Posted February 23 Share Posted February 23 (edited) not necessarily. the other thing you could try is to stop the z-index transformation. I would caveat that by saying that this is - i think - a relatively new feature and so the code might change. Squarespace can of course change how the site is rendered at any time... might work though. add this to your css article section:nth-child(1).has-section-divider .section-border { transform: unset !important; } this will sort out the transition on the first section in the page. should be ok. Edited February 23 by iamdavehart Dave Hart. Software/Technology Consultant living in London Link to comment
couper37 Posted February 23 Author Share Posted February 23 Frustrating we can't have both. It's kind of like the new way they handle images in Fluid. Now we can position them more easily, but the animations are gone. Link to comment
couper37 Posted February 23 Author Share Posted February 23 That addition let me enable the divider and lock the BG! So thankful for people like you who understand CSS waaaay better than me! iamdavehart 1 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