JSFiddle - React, Tailwind, and code Playground

by Terry Mun

HTML

<div id="img" data-img-src="http://pcdn.500px.net/553621/ae6a6518619f0cc18dde75a15c4e648df70b0686/15.jpg"></div>

CSS

#img {
    border: 1px solid #333;
    width: 400px;
    height: 400px;
}

JavaScript

$(document).ready(function() {
    // Generate random x-y coordinates
    var x = parseInt(100*Math.random(0,1)),
        y = parseInt(100*Math.random(0,1));
    
    // Set background-image and position
    $('#img').css({
        'background-image':'url('+$('#img').data('img-src')+')',
        'background-position':x+'% '+y+'%'
    });
});