JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <h2>Vanilla Image:</h2>
    <img src="http://images2.wikia.nocookie.net/__cb20110811172434/fallingskies/images/f/fd/Totoro_normal.gif" />
</div>

<div>
    <h2>Fill 200x100</h2>
    <div class="wide" my-background-image="http://images2.wikia.nocookie.net/__cb20110811172434/fallingskies/images/f/fd/Totoro_normal.gif"></div>
</div>
<div>
    <h2>Fill 100x200</h2>
    <div class="tall" my-background-image="http://images2.wikia.nocookie.net/__cb20110811172434/fallingskies/images/f/fd/Totoro_normal.gif"></div>
</div>

CSS

div.wide {
    width: 200px;
    height: 100px;
    border: 1px solid orange;
}

div.tall {
    width: 20px;
    height: 200px;
    border: 1px solid orange;
}

JavaScript

$(document).ready(function() {
    $('div[my-background-image]').each(function(i, el) {
       $(el).css({
        'background-image': 'url(' + $(el).attr('my-background-image') +')',
        'background-size' : 'cover',
        'background-repeat' : 'no-repeat',
        'background-position' : 'center center'
      });
    });
});