Infinite Scrolling Background

HTML

<div id="frame">
    <div id="slide"></div>
</div>
<img src="http://courses.mansion.fm/photo-5345/files/2014/03/mario.png">

CSS

#frame {
    width: 480px;
    height: 360px;
    background: darkblue;
    overflow: hidden;
}
#slide {
    position: relative;
    width: 960px;
    /* twice the width of the image */
    height: inherit;
    background-repeat: repeat-x;
    background-image: url("https://i2.wp.com/www.seventeengallery.com/wp-content/uploads/2013/03/PBD-Five-in-one-Mario-Clouds.jpg");
}
img {
    position: relative;
    top: -147px;
    left: 300px;
    max-width: 100px;
}

JavaScript

var bgWidth = 480;
var position = 0;
var speed = .9;
var slide = $('#slide');

setInterval(animateBackground, 30);


function animateBackground() {

    position = position - speed;

    if (position < -bgWidth) {
        position = 0;
    }

    slide.css('left', position);
}