JSFiddle - React, Tailwind, and code Playground

by vaibviad

HTML

<div class="bg">
    <span>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdasasdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br><br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br>asdasdasdas<br></span>
</div>

CSS

html, body{
    height:100%;
    min-height:100%;
    margin:0;
    padding:0;
}
.bg{
    width:100%;
    height:100%;
    background: #fff url(http://www.abeachcottage.com/images/old/6a00e5536576ef88340120a8c22684970b-pi.jpg) no-repeat fixed 0 0; 
    overflow:auto;
}

JavaScript

$('.bg').scroll(function(){
var x = $(this).scrollTop();
$(this).css('background-position','0% '+parseInt(-x/10)+'px');
});