JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<div id="parallax">
</div>
<div class="bla">
</div>

CSS

div#parallax {
  display: block;
  width: 100%;
  height: 200px;
  background: yellow;
  position: relative;
  z-index: -1;
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1000px-Google_2015_logo.svg.png') center center;
  background-size: auto 100%;
  background-repeat: no-repeat;
  position: relative;
}

.bla {
  background: black;
  color: white;
  width: 100%;
  height: 2000px;
}

JavaScript

const parallax = document.getElementById("parallax");
window.addEventListener("scroll",function(){
    let offset = window.pageYOffset;
    parallax.style.top = offset * 0.5 + "px";
    
});