JSFiddle - React, Tailwind, and code Playground

by Kai

HTML

<div id="wrapper">
  <img class="header-img" src="http://i.imgur.com/o9eOQ.png"/>
</div>

CSS

#wrapper {
    width: 960px;
    height: 720px;
}

.header-img {
    height: 75px;
    width: 350px;
    -webkit-transition: background 2s;
}

.preload_images {
    background: url(http://riot-web-static.s3.amazonaws.com/media/artwork/1.jpg) no-repeat center center fixed #000;
    background: url(http://riot-web-static.s3.amazonaws.com/media/artwork/1.jpg) no-repeat center center fixed #000,
        url(http://riot-web-static.s3.amazonaws.com/media/artwork/1.jpg) no-repeat center center fixed #000,
        url(http://riot-web-static.s3.amazonaws.com/media/artwork/2.jpg) no-repeat center center fixed #000,
        url(http://riot-web-static.s3.amazonaws.com/media/artwork/3.jpg) no-repeat center center fixed #000,
        url(http://riot-web-static.s3.amazonaws.com/media/artwork/4.jpg) no-repeat center center fixed #000,
        url(http://riot-web-static.s3.amazonaws.com/media/artwork/5.jpg) no-repeat center center fixed #000,
        url(http://riot-web-static.s3.amazonaws.com/media/artwork/6.jpg) no-repeat center center fixed #000,
        url(http://riot-web-static.s3.amazonaws.com/media/artwork/7.jpg) no-repeat center center fixed #000,
        url(http://riot-web-static.s3.amazonaws.com/media/artwork/8.jpg) no-repeat center center fixed #000,
        url(http://riot-web-static.s3.amazonaws.com/media/artwork/9.jpg) no-repeat center center fixed #000,
        url(http://riot-web-static.s3.amazonaws.com/media/artwork/10.jpg) no-repeat center center fixed #000,
        url(http://riot-web-static.s3.amazonaws.com/media/artwork/11.jpg) no-repeat center center fixed #000,
        url(http://riot-web-static.s3.amazonaws.com/media/artwork/12.jpg) no-repeat center center fixed #000,
        url(http://riot-web-static.s3.amazonaws.com/media/artwork/13.jpg) no-repeat center center fixed #000,
        url(http://riot-web-static.s3.amazonaws.com/media/artwork/14.jpg) no-repeat center center fixed #000,
       ...

JavaScript

(function ($) {
    var image_path = 'http://riot-web-static.s3.amazonaws.com/media/artwork/$i.jpg',
        image_to_use = null;
    setInterval(function () {
        image_to_use = image_path.replace('$i', (Math.random() * 49 >> 0));
        $('#wrapper').css('background', 'url(' + image_to_use + ') no-repeat top center fixed #000');
    }, 5000);
}(jQuery));