html – How you can make a parallax impact on a Cowl Picture with overlay (noJS)?

* {
  box-sizing: border-box;
}

physique{
  padding: 0;
  margin: 0;
}

.wrapper {
  place: relative;
}

@media (min-width: 80em){
  .cover_wrapper {
    max-width: 1280px;
  }
}

.img {
  data-object-position="75% 50%";
  place: absolute;
  peak: 100%;
  width: 100%;
  object-fit: cowl;
  margin: 0;
}

.cowl {
  place: relative;
  margin-bottom: 2em;
  padding: 3em 0;
  clear: each;
  background-size: cowl;
  background-repeat: no-repeat;
  background-position: middle;
  -webkit-animation: intro 0.3s each;
  animation: intro 0.3s each;
  animation-delay: 0s;
  -webkit-animation-delay: 0.25s;
  animation-delay: 0.25s;
}

.cowl::after{
  clear: each;
  content material: "";
  show: desk;
}

.title {
  font-size: 2.441em;
  margin-top: 0;
  line-height: 1;
  margin-top: 0;
  line-height: 1;
  margin: 2em 0 0.5em;
  margin-top: 2em;
}

.cover_wrapper {
  padding-left: 1em;
  padding-right: 1em;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

.font{
  font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
  font-size: 1.25em;
  colour: #fff;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

<div class="wrapper">
  <img class="img" src="https://photographs.unsplash.com/photo-1514496959998-c01c40915c5f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&match=crop&w=1740&q=80" data-object-position="75% 50%">
  <div class="cowl">
    <div class="cover_wrapper">
      <h1 class="title font">Title</h1>
      <p class="font" model="padding-top: 140px;margin: 0px;">That is my Web site</p>
    </div>
  </div>
</div>

<div id="principal" position="principal">
  one thing one thing
</div>