JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/stellar.js/0.6.2/jquery.stellar.min.js"></script>
<div class="content" id="content1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae erat vel purus pharetra viverra vel ac risus. Vivamus aliquet nunc pulvinar magna dignissim semper. Mauris eget tellus feugiat, suscipit ex non, suscipit nibh. Sed eu consectetur dui. Sed arcu neque, blandit at neque ac, auctor malesuada velit. Cras interdum, urna id mattis iaculis, quam magna porta neque, sit amet mollis lectus nibh at lacus. Morbi iaculis cursus iaculis. Proin nulla ex, consectetur ut finibus non, pellentesque et ipsum. Proin commodo arcu at nunc commodo, quis consequat ligula sollicitudin. Sed interdum neque nec elit dapibus, non pellentesque turpis maximus. Duis tristique erat vitae dui ultrices efficitur. Morbi tempus malesuada arcu ut aliquam. Aliquam ullamcorper ornare ipsum ut malesuada. Sed feugiat placerat sapien at dictum.</p>
</div>
<div class="content" id="content2">
<p>Nam malesuada lorem non dui porta, sed tempus nulla porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer ac lacus pulvinar, laoreet turpis ut, consequat est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vitae ligula non est mollis faucibus sit amet sed ipsum. Sed rutrum, quam id faucibus lobortis, tellus nulla fermentum velit, in porta diam lorem sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin laoreet mauris ut mauris maximus, eget interdum neque mollis. Praesent eget sem pulvinar, volutpat ex condimentum, elementum arcu. Vivamus efficitur est ipsum, a tempor purus gravida id. Duis fermentum, leo vel gravida imperdiet, ligula magna cursus ante, vel lacinia erat sem nec ante. Proin id purus eget neque finibus rhoncus. Quisque ut velit nisl. Ut non faucibus sapien, et laoreet risus.</p>
</div>
<div class="content"...
CSS
body {
font-size: 20px;
color: white;
text-shadow: 0 1px 0 black, 0 0 5px black;
}
p {
padding: 0 0.5em;
margin: 0;
}
.content {
background-attachment: fixed;
height: 400px;
}
#content1 {
background-image: url("http://www.tamperlock.com/blog/wp-content/uploads/2014/08/london-england.jpg");
}
#content2 {
background-image: url("http://ocdn.eu/images/pulscms/ZjU7MDQsMCwzMiwzODQsMWZhOzA2LDMyMCwxYzI_/1eb29a70dabd0994cdefaad01ca3c884.jpg");
}
#content3 {
background-image: url("http://www.zeus.aegee.org/magazine/wp-content/uploads/napoli-golfo-vesuvio.jpg");
}
#content4 {
background-image: url("http://www.tamperlock.com/blog/wp-content/uploads/2014/08/london-england.jpg");
}
#content5 {
background-image: url("http://ocdn.eu/images/pulscms/ZjU7MDQsMCwzMiwzODQsMWZhOzA2LDMyMCwxYzI_/1eb29a70dabd0994cdefaad01ca3c884.jpg");
}
#content6 {
background-image: url("http://www.zeus.aegee.org/magazine/wp-content/uploads/napoli-golfo-vesuvio.jpg");
}
JavaScript
$.stellar({
horizontalScrolling: false,
responsive: true
});