JSFiddle - React, Tailwind, and code Playground

HTML

<div id='header'>
</div>

<div id="header-2"></div>

<script type="text/javascript" src="http://gbif-portal.googlecode.com/svn-history/r375/portal-web/trunk/src/main/webapp/js/vendor/jquery-backgroundPosition.js"></script>

CSS

#header, #header-2 {
    background-image: url('http://img41.imageshack.us/img41/8025/bgclouds.png');
    background-repeat: repeat-x;
    height: 180px;
}

JavaScript

(function($) {
    $.fn.scrollingBackground = function(options) {
        // settings and defaults.
        var settings = options || {};
        var duration = settings.duration|| 1;
        var step = settings.step || 1;
        
        var element = this;
        
        // perform the animation forever:
        var animate = function() {
            element.css("background-position", "0px 0px");
            element.animate({
                backgroundPosition: step + "px 0px"
            }, duration, "linear", animate);            
        };
        animate();
    };
})(jQuery);

$("#header").scrollingBackground({
    duration: 2500,
    step: 2247
});

$("#header-2").scrollingBackground({
    duration: 30000,
    step: -2247
});