JSFiddle - React, Tailwind, and code Playground

by Matt_Coughlin

CSS

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background: url(http://www.forestpath.org/test/misc/img/photos/photo002_640_480.jpg) no-repeat 0 0;
}

JavaScript

function stretchBg(width, height, contain) {
    var pageWidth = $(document).width();
    var pageHeight = $(document).height();

    if ((pageWidth / pageHeight) > (width / height) == !!contain)
        $('body').css({backgroundSize: 'auto ' + pageHeight + 'px'});
    else
        $('body').css({backgroundSize: pageWidth + 'px auto'});
}

$(document).ready(function(){ stretchBg(640, 480); });  // Page load

$(window).resize(function(){  stretchBg(640, 480); });  // Browser resize