JSFiddle - React, Tailwind, and code Playground
HTML
<div class="parallax_section parallax_image_first">
<div>
<article class="title">Hier steht der Titel</article>
</div>
</div>
<div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tempor lorem. Proin egestas sagittis orci sit amet ultricies. Etiam nec pharetra justo, scelerisque scelerisque elit. Nam pretium purus eu neque pretium accumsan. Proin eget pulvinar dui. Vestibulum nulla magna, auctor quis mollis eget, hendrerit nec enim. Nam commodo feugiat metus, ac auctor mi. Quisque sed ante eget arcu sollicitudin sodales nec nec nunc.
</div>
</div>
<div class="parallax_section parallax_image_second">
<div>
<article class="quote">"Hier steht ein Zitat,
<br>das sinnstiftend für das Bild ist."</article>
</div>
</div>
<div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tempor lorem. Proin egestas sagittis orci sit amet ultricies. Etiam nec pharetra justo, scelerisque scelerisque elit. Nam pretium purus eu neque pretium accumsan. Proin eget pulvinar dui. Vestibulum nulla magna, auctor quis mollis eget, hendrerit nec enim. Nam commodo feugiat metus, ac auctor mi. Quisque sed ante eget arcu sollicitudin sodales nec nec nunc.
</div>
</div>
CSS
.parallax_section {
height: 600px;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: 100% auto;
position:relative;
}
.parallax_image_first {
background-image: url("https://source.unsplash.com/random/1200x900");
}
.parallax_image_second {
background-image: url("https://source.unsplash.com/random/1200x900");
}
.title {
font-family: Arial;
font-size: 2.7em;
font-weight: bold;
text-align: center;
color: white;
padding-top: 30vh;
}
.quote {
font-family: Arial;
font-size: 1.7em;
font-weight: bold;
text-align: right;
color: white;
padding-top: 15vh;
padding-right: 100px;
}
.text {
padding: 20px 70px 20px 70px;
}
}