JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bg">
    <img src="http://www.awesomemyspacebackgrounds.com/Myspace-Backgrounds/myspace-codes-backgrounds-2.gif" alt="" title="">
</div>
<div id="message">bla</div>

CSS

body, html {
  margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
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: 25%;
 height: 20%;
 position: absolute;
 overflow: hidden;
 right: 20%;
 top: 25%;
 background-color: #eee;
 border: 1px solid #999;
 color: #000;  
 
 /* use settings below on your html-wrapper to 
    be above the background-image */
 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("");
  }
}