JSFiddle - React, Tailwind, and code Playground

HTML

<div id="one" data-bg-img="http://placehold.it">
  hello
</div>

CSS

div {
  background-position: center;
  height: 300px;
}

JavaScript

$(function() {
  var mediaQueryTemplate = '\
  	@media screen and (min-width:350px) { \
    	#{{ID}} { background-image: url({{BASE_URL}}/350x150) } \
    } \
    @media screen and (min-width:640px) { \
    	#{{ID}} { background-image: url({{BASE_URL}}/640x960) } \
    } \
    @media screen and (min-width:1280px) { \
    	#{{ID}} { background-image: url({{BASE_URL}}/1280x800) } \
    } \
    @media screen and (min-width:1280px) { \
    	#{{ID}} { background-image: url({{BASE_URL}}/1280x800) } \
    } \
    @media screen and (min-width:1920px) { \
    	#{{ID}} { background-image: url({{BASE_URL}}/1920x1440) } \
    } \
  	@media screen and (min-width:2560px) { \
    	#{{ID}} { background-image: url({{BASE_URL}}/2560x1440) } \
    } \
  ';

  var $style = $('<style>');
  $style.appendTo('head');

  $('[data-bg-img]').each(function() {
    var dataImg = $(this).attr('data-bg-img');
    var mediaQueries = mediaQueryTemplate.replace(/{{ID}}/g, this.id).replace(/{{BASE_URL}}/g, dataImg);

    $style.text($style.text() + mediaQueries);
  });
});