FezkoDesigns Posted June 18 Share Posted June 18 Hi there, I'm not sure if I can do this on Squarespace with custom CSS, but is there a way to keep the background image, header, and divider (left column) sticky while making the right column (organization timeline) scroll? Link to comment
Ziggy Posted June 18 Share Posted June 18 Yes, this is generally possible, can you share your website URL and this page? Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
FezkoDesigns Posted June 20 Author Share Posted June 20 Hi Ziggy! Thank you, I will DM you this information. Link to comment
Solution Ziggy Posted June 20 Solution Share Posted June 20 A few steps; first combine this text into a single text block: Pin this block with this button, and set the offset to 60px: Remove the background image from the section and add this code: section[data-section-id="66401df29cb8660c4f9af59c"] { .section-background{ &::after { /*creating the element*/ content: ""; width:100%; height:100%; position: absolute; /*adding the image*/ background-image:url('https://images.squarespace-cdn.com/content/v1/564557c3e4b0c87513050114/1601421132965-VGA8O3U4MAXR0TRBFDJU/Guests+%40+Gallery+Back+Room.jpg'); 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: scroll !important; } } } } This code was developed by Will Myers, you can see his website and instructions that go along with it here: https://www.will-myers.com/adding-parallax-effect-to-a-background-image-in-squarespace-71 FezkoDesigns and tuanphan 1 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
FezkoDesigns Posted June 21 Author Share Posted June 21 @Ziggy YESS, thank you so much!!! Sorry to ask this of you, but do you have a code I can include for a dark overlay to add over the image? I don't believe the contrast between the photo and white text will pass WCAG standards. 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