css background-size - <img> js based demo

SassMeister-input-HTML.html

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <img 
    class="bg-img" 
    src="http://placekitten.com/g/200/300"
    alt="kitten"
  >  
  <img class="bg-img" src="http://placekitten.com/g/200/300">  
  <img class="bg-img" src="http://placekitten.com/g/200/300">  
  <img class="bg-img" src="http://placekitten.com/g/200/300">  
  <img class="bg-img" src="http://placekitten.com/g/200/300">  
  <img class="bg-img" src="http://placekitten.com/g/200/300">  
  <img class="bg-img" src="http://placekitten.com/g/200/300">  
  <img class="bg-img" src="http://placekitten.com/g/200/300">  
</div>

<script>
(function () {
  function loadScript(url, callback) {
  
    var script = document.createElement("script")
    script.type = "text/javascript";
  
    if (script.readyState) { //IE
        script.onreadystatechange = function () {
            if (script.readyState == "loaded" || script.readyState == "complete") {
                script.onreadystatechange = null;
                callback();
            }
        };
    } else { //Others
        script.onload = function () {
            callback();
        };
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
  }
 
    loadScript(
      "https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", 
      function() {
        //jQuery loaded
        
        if( true ) {
          /** use image src url as background url */
          console.log('jquery loaded');
          var $element = jQuery( '.bg-img' );
          var src = $element.attr('src');
          $element.removeAttr('src');
          
          var cssImgUrl = 'url(' + src + ')';
          $element.css( 'background-image', cssImgUrl );
        }
    });
 
 
})();
</script>

SassMeister-input.sass

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

.container
  width: 100%
  height: 500px
  
.bg-img
  width:  100%
  height: 100%
  background-size: cover
  background-repeat: no-repeat
  background-position: center

body
  color: green

SassMeister-output.css

.container {
  width: 100%;
  height: 500px;
}

.bg-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

body {
  color: green;
}

SassMeister-rendered.html

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <img 
    class="bg-img" 
    src="http://placekitten.com/g/200/300"
    alt="kitten"
  >  
  <img class="bg-img" src="http://placekitten.com/g/200/300">  
  <img class="bg-img" src="http://placekitten.com/g/200/300">  
  <img class="bg-img" src="http://placekitten.com/g/200/300">  
  <img class="bg-img" src="http://placekitten.com/g/200/300">  
  <img class="bg-img" src="http://placekitten.com/g/200/300">  
  <img class="bg-img" src="http://placekitten.com/g/200/300">  
  <img class="bg-img" src="http://placekitten.com/g/200/300">  
</div>

<script>
(function () {
  function loadScript(url, callback) {
  
    var script = document.createElement("script")
    script.type = "text/javascript";
  
    if (script.readyState) { //IE
        script.onreadystatechange = function () {
            if (script.readyState == "loaded" || script.readyState == "complete") {
                script.onreadystatechange = null;
                callback();
            }
        };
    } else { //Others
        script.onload = function () {
            callback();
        };
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
  }
 
    loadScript(
      "https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", 
      function() {
        //jQuery loaded
        if( true ) {
        /** use image src url as background url */
        console.log('jquery loaded');
        var $element = jQuery( '.bg-img' );
        var src = $element.attr('src');
        $element.removeAttr('src');
        
        var cssImgUrl = 'url(' + src + ')';
        $element.css( 'background-image', cssImgUrl );
        }
    });
 
 
})();
</script>