JSFiddle - React, Tailwind, and code Playground

by Sam Korn

HTML

<div class="wrapper">
    <div class="img">image on background</div>
</div>

CSS

.wrapper { position: relative; }
.img { position: absolute; left: 0; top: 0; background: url(image.png); }

JavaScript

$(function(){
        var $image = $('div.img'),
            $wrapper = $image.parent(),
            delay = 1000,
            duration = 4000,
            moveRight = function(){
                $image.delay(delay).animate({
                    left: $wrapper.width() - $image.width()
                }, {
                    duration: duration,
                    complete: moveLeft
                });
            },
            moveLeft = function(){
                $image.delay(delay).animate({
                    left: 0
                }, {
                    duration: duration,
                    complete: moveRight
                });
            };
        
        moveRight();
    });