How to shift the focus on a picture inserted with css

•  

Posted Friday at 03:06 PM (edited)

Password: psychology

Note: reposted from last week because i didn't get any responses

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 up or down. 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.

I tried adding white space to the bottom of one of the photos to shift the view down, that didn't work. cropping the photo so that the best part was in the middle of the photo space just resulted in a blown up image that still didn't focus where i wanted it. It seems that the answer lies in editing the css and editing the photo itself doesn't help

//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);
    } 
  }
}