title: Custom Parallax in Wordpress
body: <p>I'm in the process of designing my Wordpress website, with extremely basic knowledge of coding. I've finished designing the home and content pages, however, only one action is pending. </p>
  
  <p>I would like to include the parallax effect included below, on my home page, but not as the header. My webpage begins with the header, then the navigation bar, and then I would like to create a section including the parallax effect linked above, with 4 different layers. </p>
  
  <p><strong>CSS:</strong> </p>
  
  <pre><code>@import "compass/css3";
  
  *{
    box-sizing: border-box;
  }
  
  html,
  body{
    background-color: #FEDCC8;
  }
  
  .parallax {
    perspective: 100px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    top: 0;
    left: 50%;
    right: 0;
    bottom: 0;
    margin-left: -1500px;
  }
  
  .parallax__layer{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  
    img{
      display: block;
      position: absolute;
      bottom: 0;
    }
  }
  
  .parallax__cover{
    background: #2D112B;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 2000px;
    z-index: 2;
  }
  
  $parallax__layers: 6;
  
  @for $i from 0 through $parallax__layers {
    $x: ($parallax__layers - $i) / 2;
    .parallax__layer__#{$i}{
       transform: translateZ(-100 * $x#{px}) scale($x + 1);
    }
  }
  </code></pre>
  
  <p><strong>HTML:</strong> </p>
  
  <pre><code>&lt;div class="parallax"&gt;
    &lt;div class="parallax__layer parallax__layer__0"&gt;
        &lt;/div&gt;
    &lt;div class="parallax__layer parallax__layer__1"&gt;
      &lt;img src="data:image/png;image URL here"/&gt;
    &lt;/div&gt;
    &lt;div class="parallax__layer parallax__layer__2"&gt;
      &lt;img src="data:image/png;image URL here"/&gt;
    &lt;/div&gt;
    &lt;div class="parallax__layer parallax__layer__3"&gt;
      &lt;img src="data:image/png;image URL here"/&gt;
    &lt;/div&gt;
    &lt;div class="parallax__layer parallax__layer__4"&gt;
      &lt;img src="data:image/png;image URL here"/&gt;
    &lt;/div&gt;
    &lt;div class="parallax__layer parallax__layer__5"&gt;
      &lt;img src="data:image/png;image URL here"/&gt;
    &lt;/div&gt;
    &lt;div class="parallax__layer parallax__layer__6"&gt;
      &lt;img src="data:image/png;image URL here"/&gt;
    &lt;/div&gt;
    &lt;div class="parallax__cover"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Can you kindly guide me with achieving this?</p>