JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header-content">
    <div id="ball1"> </div>
</div><!--End Header-content-->

CSS

#header-content {width:100px;}

#ball1 { background:url(http://www.dblsportsagency.com/wp-content/themes/DBLv2/gfx/ball1.png) no-repeat; width:100%; position:absolute; height:60px;}

JavaScript

$(document).ready(function() {
    var scrollSpeed=70;
    var step=1;
    var current=0;
    var imageWidth=60;
    var headerWidth=screen.width;
    var headerStyle = document.getElementById('header-content').style;
    var restartPosition=-(imageWidth-headerWidth);
    
    function scrollBg(){
    current-=step;
    if(current==restartPosition){
        current=0;}
        
    $('#ball1').css("background-position",current+"px 0");}
    var init = setInterval(scrollBg,scrollSpeed);
});