CSS Parallax

Site URL: https://lily-oboe-g479.squarespace.com

Password is "1"

Hi, 

I have been working on this for over 6 hours and I cannot figure out how to add Parralaxing to my site. 

I want to mainly add it to parallax images when you scroll, I just want to figure out how to add it to image blocks but I don't know where to put the ID and the Class. 

Here is the code from this site: 

https://codepen.io/smlparry/pen/JzGELL

HTML

<div class="wrapper">
  <div class="parallax-container">
    <div class="background">
      <img class="background__image" src="https://s3-ap-southeast-2.amazonaws.com/daily-fire-assets/codepen-assets/building.jpg" />
    </div>
    <div class="foreground">
      <div class="foreground__content">
        <h1>Oooo, parallax</h1>
      </div>
    </div>
  </div>
</div>

CSS

/* layout */
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 420px;
}

/* Parallax Styles */
.parallax-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  perspective: 8px;
  perspective-origin: 0%;
  display: flex;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateZ(0px);
}

.foreground {
  margin-top: auto;
  margin-bottom: 50px;
  
  transform-origin: 0;
  transform: translateZ(3px) scale(0.625);
  
  /* Uncomment the code below to see the difference the scale property makes! */
  /* transform: translateZ(3px); */
  /* transform: translateZ(0) scale(1); */
}

.foreground h1 {
  font-size: 36px;
}