Rotating background

HTML

<div class="container">
	<div class="text">Content area</div>
</div>
<div class="circleWrap">
    <div class="circleContainer">
        <div class="circle"></div>
    </div>
</div>

CSS

body{
  	height: 100%;
	width:100%;
	font-family:'Quicksand';
}
.container {
	width:960px;
	margin: 0 auto;
}
.circleWrap {
	margin: 0 auto;
	width:960px;
	position:relative;
}
.circleContainer {
	width: 970px;
	position:fixed;
	overflow:visible;
	z-index:-50;
}
.circle{
    background:url('https://cdn.dribbble.com/users/815278/screenshots/2375130/random-turtle.gif') no-repeat center;
    width: 1772px;
    height: 1772px;
	margin-left: -400px;
}
.text {
	z-index:50;
	position:absolute;
	height:2000px;
	width:960px;
    border:#000 thick solid;
}

JavaScript

$(function() {
    var rotation = 0, 
        scrollLoc = $(document).scrollTop();
    $(window).scroll(function() {
        var newLoc = $(document).scrollTop();
        var diff = scrollLoc - newLoc;
        rotation += diff, scrollLoc = newLoc;
        var rotationStr = "rotate(" + rotation / 100 + "deg)";
        $(".circle").css({
            "-webkit-transform": rotationStr,
            "-moz-transform": rotationStr,
            "transform": rotationStr
        });
    });
})