JSFiddle - React, Tailwind, and code Playground

HTML

<a>
<div id='one' class='test'></div>
</a>
<div id='two' class='test'></div>

CSS

.test{
    width:100px;
    height:100px;
    background-size:100px;
    background-repeat:no-repeat;
    vertical-align: top;
    background-size: cover;
    background-position: center center;
    position: relative;
    background-color: #000;
    overflow: hidden;
    transition: border ease 0.2s;
border: 0px solid #fff;
    box-sizing: border-box;
    height: 250px;
    width: 100%;
display: block;
}
a{
    width: 100%;
    display: block;
    box-sizing: border-box;
}

JavaScript

var one = document.getElementById('one');
var two = document.getElementById('two');

var src = 'http://fc03.deviantart.net/fs70/i/2012/163/0/d/dog_with_glasses_by_danihee-d53949b.jpg';

one.style.backgroundImage = 'url('+src+')';
two.style.backgroundImage = 'url('+src+')';