JSFiddle - React, Tailwind, and code Playground
CSS
body {
background:url(http://cdnx.jetcdn.com/static/images/login/backgrounds/8.jpg)
}
JavaScript
function bgSize () {
var imageWidth = 8,
imageHeight = 5,
windowWidth = window.innerWidth,
windowHeight = window.innerHeight;
var x1 = 0.5 * windowWidth, x2 = 0.53125 * imageWidth,
y1 = 0.5 * windowHeight, y2 = 0.38333 * imageHeight;
var scale = Math.max(
x1 / x2, y1 / y2,
(windowWidth - x1) / (imageWidth - x2),
(windowHeight - y1) / (imageHeight - y2)
);
var newWidth = Math.round(imageWidth * scale),
newHeight = Math.round(imageHeight * scale);
var left = Math.round(x1 - x2 * scale),
top = Math.round(y1 - y2 * scale);
document.body.style.backgroundSize = newWidth + "px " + newHeight + "px";
document.body.style.backgroundPosition = "left " + left + "px top " + top + "px";
}
window.onresize = bgSize;
bgSize(); // Do once at load too