JSFiddle - React, Tailwind, and code Playground

by Julien Vignolles

HTML

<div class="image-container" data-image-url="http://recuperaatumujer.com/wp-content/themes/thesis/custom/rotator/sample-1.jpg">one</div>
<div class="image-container" data-image-url="http://recuperaatumujer.com/wp-content/themes/thesis/custom/rotator/sample-2.jpg">two</div>
<div class="image-container" data-image-url="http://recuperaatumujer.com/wp-content/themes/thesis/custom/rotator/sample-3.jpg">three</div>

CSS

.image-container {
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 0 0 1em 1em;
    background: #ddd none left top no-repeat;
    background-size: cover;
}

JavaScript

$('.image-container').each(function(i, el) {
    el = $(el);
    el.css('background-image', 'url(' + el.data('image-url') + ')');
});