how to change the focus on a pic inserted with css

Site URL: https://www.qbpsychology.ca/

Password: psychology

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

I'm hoping theres a way to edit the code to make it so that i can change the area of focus for individual pictures? For clarity sake, I've pasted the css below. The red text is the commands for how the parallax should act and go, and the blue text is the src code of the pic to the location where i want the pic to go.

If anyone is interested, here's the link to the video: https://www.will-myers.com/adding-parallax-effect-to-a-background-image-in-squarespace-71#:~:text=So the parallax effect will,section background on your website.

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