JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bg">
    <img src="http://www4.picturepush.com/photo/a/510627/480/Press-Kit/background.jpg?v0" alt="" title="">
</div>
<div id="message">bla</div>

CSS

body {
  background-color: transparent;
  padding: 10px;
}
img {
  /* Makes IE's resizing feature look much better */
  -ms-interpolation-mode: bicubic;
}
#bg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
#message {
  width: 200px;
 height: 90px;
 margin: 40px auto;
 background-color: #eee;
 border: 1px solid #999;
 color: #000;  
 
 /* use settings below on your html-wrapper to 
    be above the background-image */
 position: relative;
 z-index: 5; 
}

JavaScript

$(document).ready(function() {
  // find the aspect ratio of the background image
  var imageratio = $("#bg img").width() / $("#bg img").height();
  // set the background after the initial load
  backgroundResize(imageratio);
    
  // resize when the browser window is resized
  $(window).bind("resize", function(){
      backgroundResize(imageratio);
  });

});

function backgroundResize(imgratio){
  // the window aspectratio will change when resized, so we 
  // are retrieving it in this function
  var windowratio = $(window).width() / $(window).height();
  
  // message div with the aspect-ratio's, so you can see how the dimensions
  // are calculated
  $("#message").html("windowratio:<br/> " + windowratio + "<br/>imgratio:<br/> " + imgratio); 
  
  // if the imageratio is higher then the windowratio, you use the height
  // as the leading number. Don't forget to reset the width, so that it will be 
  // set automatically, based on the browser calculations  
  // if the imageratio is smaller, use thw width and reset the height
  if (imgratio >  windowratio){
    $("#bg img").height($(window).height())
    $("#bg img").width("");  
  } else {     
      $("#bg img").width($(window).width())
      $("#bg img").height("");
  }
}