JSFiddle - React, Tailwind, and code Playground

HTML

<img id='bg'></img>
<img id='fg'></img>

CSS

#bg, #fg {
  position:absolute;
}

#fg {
  opacity: 0.7;
}

JavaScript

$(function() {
  var bg = new Image();
  bg.src = 'http://i.imgur.com/iOvxJ.jpg';
  var fg = new Image();
  fg.src = 'http://i.imgur.com/HP9tp.jpg';

  bg.onload = function() {
    $('#bg').attr('src', bg.src);
    $(window).resize();
  }
  fg.onload = function() {
    $('#fg').attr('src', fg.src);
    $(window).resize();
  }
  $(window).resize(function() {
    var width = $(window).width();
    var height = $(window).height();
     
    var bscale = Math.max(width/bg.width, height/bg.height);
    var bwidth = bg.width * bscale;
    var bheight = bg.height * bscale;
    $('#bg').attr('width', bwidth);
    $('#bg').attr('height', bheight);
    $('#bg').css('top', (height - bheight)/2);
    $('#bg').css('left', (width - bwidth)/2);

    var margin = 10;
    var fg_width = fg.width;
    var fg_height = fg.height;
    var fscale = Math.min(width/fg_width, height/fg_height);
    var fwidth = fg_width * fscale;
    var fheight = fg_height * fscale;
    $('#fg').attr('width', fwidth-2*margin);
    $('#fg').attr('height', fheight-2*margin);
    $('#fg').css('top', (height - fheight)/2+margin);
    $('#fg').css('left', (width - fwidth)/2+margin);
  });
});