JSFiddle - React, Tailwind, and code Playground

HTML

<div id="background">
    <div id="diamond">
    </div>
</div>

CSS

#background, #diamond {
    width: 649px;
    height: 500px;
}
#background {
    background: url("http://i.imgur.com/FjjAC.jpg") repeat-x;
}
#diamond {
    background: url("http://i.imgur.com/qollp.png");
}

JavaScript

$(function() {
    var backgroundwidth = 876;
    // Create a random offset for starting positions
    var offset = Math.round(Math.floor(Math.random()* 876));
    function scrollbackground() {
        //Ensure all bases are covered when defining the offset.
        offset = (offset < 1) ? offset + (backgroundwidth - 1) : offset - 1;
        // Put the background onto the div
        $('#background').css("background-position", offset + "px 50%");
        // Enable the function to loop when it reaches the end of the image
        setTimeout(function() {
            scrollbackground();
        }, 50);
    }
    // Initiate the scroll
    scrollbackground();
});