parallax background hero

by jorgeluis

HTML

<section class="parallax-background">
</section>

<section class="content">

<h1>
Lorem ipsum is placeholder text
</h1>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>


<h2>
Lorem ipsum is placeholder text
</h2>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>


<h3>
Lorem ipsum is placeholder text
</h3>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>


</section>

CSS

section {
  padding: 3rem;
}

.parallax-background {
  /* set image for background   */
  background-image: url('https://help.lever.co/hc/article_attachments/360068811031/Screen_Shot_2020-09-13_at_10.25.53_PM.png');
  
/*  full height image  */
  height: 70vh;
  
/*  image starting position- eg. top, right, left, bottom  */
  background-position: center;
  
/*  size of image, eg- 50%, 3rem, 500px etc.
    cover= scales the image as large as possible without stretching
  */
  background-size: cover;
  
/*  To get the desired effect, the key part is to set this background image to be fixed  */
  background-attachment: fixed;
}

.content {
  background-color: #f4f4f4;
}