<html>
<head>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
padding-bottom: 1000px;
}
.trike {
position: relative;
height: 70%;
width: 100%;
}
.trike > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(img_two.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<header class="trike">
<div></div>
</header>
<script src="/assets/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(window).scroll(function() {
var windowScroll = $(this).scrollTop();
$('.trike > div').css({
'top': '-' + windowScroll + 'px',
'right': '-' + windowScroll + 'px',
'left': '-' + windowScroll + 'px'
});
});
</script>
</body>
</html>
Here is the code I entered in a html page, really want it to work :( @travisneilson