KatherineS Posted January 1, 2021 Share Posted January 1, 2021 (edited) Site URL: https://www.qbpsychology.ca/ Hi guys! I watched a you tube video on how to mimic parallax in the new version of squarespace by putting the images in a hidden folder and then linking to them using css. The only issue is that it defaults to focusing on the vertical top of the photo, so i can't choose if i want the focus shifted away from there. You can see this very clearly by clicking on the hidden pictures folder to get a sense of the images, then go to any page where there is a picture in the header and adjust the height of the section. You'll see that the top of the photo always shows, adjusting the height of the section changes how much of the lower portion shows. The code references "center" but i don't know what language to use to tell it to shift the focus up or down, or even if i have a more nuanced control of that. Can someone tell me how to edit my code? Thanks everyone! For clarity, the stuff in red is the location where the images will be applied, the stuff in blue includes the src code for the images. Ideally, i'd like to have control of this for each photo, so i hope that its controlled in the blue section. //create the mix-in once// .parallax(){ //creating the element content: ""; width:100%; height:100%; position: absolute; //adding the image properties - don't add the image background-repeat:no-repeat; //positioning the image background-size:cover; background-position:center center; background-attachment: fixed; transform: scale(1.2); //mobile @media(max-width:787px){ background-position:center center; background-attachment: scroll !important; } } //add mix-in to section for parallax// [data-section-id="5fd3c136f185343d3286a5ac"]{ .section-background{ &::after { /* this will apply all the properties in the parallax mixin here */ .parallax(); /*This is the specific image for this section*/ background-image:url(https://static1.squarespace.com/static/5fd27dadddcfa0625ddecf41/t/5fe4fa6b5e66733f02fcad17/1608841850112/wheat+shadow+high+res.jpg?format=1500w); } } } [data-section-id="5fe38565019323436e7ddf54"]{ .section-background{ &::after { .parallax(); background-image:url(https://static1.squarespace.com/static/5fd27dadddcfa0625ddecf41/t/5fef8931143c0d28f2edd55e/1609533750668/regina%25252Bwaves%25252Bhigh%25252Bres.jpg?format=1500w); } } } [data-section-id="5fe38575019323436e7de274"]{ .section-background{ &::after { .parallax(); background-image:url(https://static1.squarespace.com/static/5fd27dadddcfa0625ddecf41/t/5fef8c1ea6a0ae63d6c9fbf8/1609534521187/saskatoon%2Bstormy%2Bsunset%2Bhigh%2Bres.jpg?format=1500w); } } } Edited January 7, 2021 by KatherineS typo, added an update Link to comment
derricksrandomviews Posted January 1, 2021 Share Posted January 1, 2021 You need to set site availablitiy to password, create one and post it her. This is something that definately needs the abliltiy to inspect the site to provide the right code or setting or both. KatherineS 1 Link to comment
KatherineS Posted January 1, 2021 Author Share Posted January 1, 2021 ok give me a sec... Link to comment
KatherineS Posted January 1, 2021 Author Share Posted January 1, 2021 I just sent you a direct message with the password Link to comment
tuanphan Posted January 1, 2021 Share Posted January 1, 2021 Can you share access password? We can help easier KatherineS 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
KatherineS Posted January 1, 2021 Author Share Posted January 1, 2021 sorry, i didn't see that you had responded! I just sent you the password in a direct message. 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