JSFiddle - React, Tailwind, and code Playground

by Chadimoglou

HTML

<section id="home">
		<div class="container">
            Test
		</div>
	</section>

CSS

#home {
	background-image: url('https://dl.dropboxusercontent.com/u/62537/jsfiddleBG/background02.jpg');
	background-size: 100% 100% !important;
	background-repeat: no-repeat;
	background-position: center;
}
.container {
    width: 400px;
    height: 500px;
    display: block;
    background: red;
    margin: 0 auto;
}

JavaScript

$(document).ready(function() {

  var theWindow = $(window),
  aspectRatio = 1920 / 1280;
    
  function resizeBg() {
    $("#home").width(theWindow.width);
    if( ( $("#home").width()/aspectRatio ) < $("#home > .container").height() ) {
	  $("#home").width( $("#home > .container").height()*aspectRatio );
	}
    $("#home").height($("#home").width()/aspectRatio);
  }

  theWindow.resize(resizeBg);
  window.onload=resizeBg();

});