JSFiddle - React, Tailwind, and code Playground

by termi

HTML

<!--[if IE 8]>
<script src="http://h123.ru/js/a.ie8.js"></script>
<![endif]-->
<script src="http://h123.ru/js/a.js"></script>

<script src="http://h123.ru/js/CSS.supports.js"></script>

CSS

html, body {
	margin:0;
	padding:0;
	height:100%;
	}
body {
	background:url(http://artgorbunov.ru/bb/soviet/20130418/neuschwanstein.jpg) 50% no-repeat;
	background-size:cover;
	}

JavaScript

var global = window
    , site = {initImage: initImage, resizeEvent: resizeEvent}
;

if( !CSS.supports("background-size", "cover") ) {
    site.initImage(function(){
        site.handleEvent = site.resizeEvent;
        site.resizeEvent();
        global.addEventListener("resize", site);
    });
};

function initImage(calback) {
    var cs = global.getComputedStyle(document.body)
        , bi = (cs.backgroundImage + "").replace(/url\(['"](.*?)['"]\)/, "$1")
        , image
    ;
    
    image = new Image();
    image.onload = function() {
        var w = image.width
            , h = image.height
        ;
        
        document.body.style.backgroundImage = "none";
        
        document.documentElement.insertAdjacentHTML("afterbegin",
            "<div id='background-container' style='position:fixed;width:100%;height:100%;overflow:hidden'>" +
                "<img id='background-image' width='" + w + "' height='" + h + "' style='position:absolute' src='" + image.src + "' />" +
            "</div>"
        );
        
        this.imageWidth = w;
        this.imageHeight = h;
        this.bgImage = document.querySelector("#background-image");
        calback();
    }.bind(this);
    image.src = bi;
};

function resizeEvent() {
    var documentWidth = document.documentElement.offsetWidth
        , documentHeight = document.documentElement.offsetHeight
        , imgHeight = this.imageHeight
        , imgWidth = this.imageWidth
        , imgRatio = imgWidth / imgHeight
        , windowRatio = documentWidth / documentHeight
        , imgTop = 0
        , imgLeft = 0
    ;
    
    if (imgRatio >= windowRatio) {
        imgHeight = documentHeight;
        imgWidth = Math.round((imgHeight) * imgRatio);
    } else {
        imgWidth = documentWidth;
        imgHeight = Math.round((imgWidth) / imgRatio);
    }
    
    if (imgWidth != documentWidth) {
        imgLeft = Math.round((documentWidth - imgWidth) / 2);
    }
    
    if (imgHeight != documentHeight) {
   ...