JSFiddle - React, Tailwind, and code Playground
by maharajan a
HTML
<div class="container">
<img src="http://d.tile.stamen.com/watercolor/5/25/13.jpg" />
</div>
<div id="parent">
<div id="child"></div>
</div>
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
test content<br />
CSS
.container {
overflow: hidden;
}
img {
-webkit-transform: translate3d(-37px, 29px, 0px);
}
#parent {
position : relative;
border : 1px solid #000;
overflow : hidden;
height : 500px;
}
#child{
background:url('http://d.tile.stamen.com/watercolor/7/99/57.jpg') 0px 0px no-repeat fixed;
width : 100%;
height : 100%;
position : absolute;
top : 0px;
left: 0px;
}