HTML Bild mit Parralax Effekt

Question

Ich möchte einen Parralax Effekt erstellen aber irgendwie funktioniert das nicht. Hier ist mein Code.

<style>
.image {
  position: relative;
  min-height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
</style>

<div class="image">

  <img id="home-section" src="https://i.pravatar.cc/1500?img=1">

  <div class="text">
    <div>
      <div>
        <h2>Lorem ipsum dolor sit amet</h2>
        <p>Lorem ipsum dolor sit.</p>
        <p>Amet consectetuer.</p>
        <p>Volutpat et.</p>
        <p>Orci ligula ipsum.</p>
        <p>Semper est est at.</p>
        <p>Eget Donec.</p>
        <p>Accumsan consequat Vivamus.</p>
        <p>Lacinia congue.</p>
        <p>Mauris libero Vestibulum urna.</p>
        <p>Nibh ridiculus metus.</p>
        <p>Convallis Nullam tincidunt hendrerit.</p>
        <p>Cursus vel.</p>
        <p>Quis interdum.</p>
        <p>Morbi sem sem.</p>
        <p>Netus sit.</p>
        <p>Risus mattis vel tempus.</p>
        <p>Id metus et.</p>
        <p>Vitae ut.</p>
        <p>Phasellus aliquet Maecenas orci.</p>
        <p>Laoreet habitant Curabitur.</p>
        <p>Justo pretium auctor augue.</p>
        <p>Ac Suspendisse eleifend.</p>
        <p>Adipiscing congue.</p>
        <p>Phasellus purus lobortis.</p>
        <p>Nulla ac Phasellus adipiscing.</p>
        <p>Sem faucibus tempus.</p>
        <p>Consequat pede eu.</p>
        <p>Lacinia Nulla.</p>
        <p>Id Sed.</p>
        <p>Commodo eu Donec.</p>
      </div>
    </div>
  </div>

</div>

Answer 1

Hier hast du ein Beispiel.

<style>
.image {
  background-image: url("https://i.pravatar.cc/1500?img=1");
  min-height: 300px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.text {
  height: 2500px;
}
</style>

<div class="image"></div>
<div class="text">
  <div>
    <div>
      <h2>Lorem ipsum dolor sit amet</h2>
      <p>Lorem ipsum dolor sit amet consectetuer eget nec eleifend consequat ipsum. Condimentum vitae nibh est pellentesque Morbi eu eu Nunc faucibus leo. Ipsum id Vestibulum laoreet laoreet volutpat a vel senectus tristique habitasse. Adipiscing ligula pede adipiscing pede feugiat sed pede wisi pede consequat. Pede at augue vitae interdum tortor enim congue vitae elit at. Orci libero cursus sed orci libero ante justo tincidunt id.</p>
    </div>
  </div>
</div>