JSFiddle - React, Tailwind, and code Playground

by ivanovsuper

HTML

<canvas id="back"></canvas>

CSS

html, body {height:100%;magin:0;padding:0;overflow:hidden}
#back { position:absolute; z-index:-100}

JavaScript

var img = new Image();
img.src = 'http://www.a-gu.ru/files/covers/cover-1308298468.jpg';
var c_back = document.getElementById('back');
var ctx = c_back.getContext('2d');

var  DrawBackImage = function() {
    c_back.width = $("body").width();
    c_back.height = $("body").height();
    var h_margin = Math.max(img.width/img.height*c_back.height-c_back.width,0)/2;
    var w_margin = Math.max(img.height/img.width*c_back.width-c_back.height,0)/2;
    ctx.drawImage(img, 0-h_margin , 0-w_margin, c_back.width+2*h_margin,  c_back.height+2*w_margin);
}

$(window).resize(function() {
    DrawBackImage();
});

DrawBackImage();