lima-city: Webhosting, Domains und Cloud
1 Pluspunkt 0 Minuspunkte

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>

von  

1 Antwort

0 Pluspunkte 0 Minuspunkte

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>

von (397 Punkte)  
Diese Community basiert auf dem Prinzip der Selbstregulierung. Beiträge werden von Nutzern erstellt, bewertet und verbessert – ganz ohne zentrale Moderation.

Wer hilfreiche Fragen stellt oder gute Antworten gibt, sammelt Punkte. Mit steigender Punktzahl erhalten Mitglieder automatisch mehr Rechte, zum Beispiel

  • Kommentare verfassen
  • Beiträge bewerten
  • Inhalte bearbeiten
  • Inhalte ausblenden

So entsteht eine Plattform, auf der sich Qualität durchsetzt – getragen von einer engagierten Gemeinschaft. Unser Ziel: Guter Inhalt. Für alle.

2.3k Fragen

2.8k Antworten

260 Kommentare

13 Nutzer