JSFiddle - React, Tailwind, and code Playground

by Filippo Bracci

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<div id="bg"><!--<div id="preloader"><img src="http://manos.malihu.gr/tuts/ajax-loader.gif" width="32" height="32" /></div>-->

<!--<img src="http://manos.malihu.gr/tuts/thebgimg.jpg" width="1200" height="900" id="bgimg" />-->

	<div id="mainimage">
  		<!--<jdoc:include type="modules" name="mainimage"/>-->
    </div>

</div>

<div id="wrapper">
    <div class="contenuti">
        <p>dslkjhfaslkhf dkjh aslkhf ljdh alkjhf sldkjfh sdlkfh sadljfkhas dlkjf h</p>
        <p>dslkjhfaslkhf dkjh aslkhf ljdh alkjhf sldkjfh sdlkfh sadljfkhas dlkjf h</p>
        <p>dslkjhfaslkhf dkjh aslkhf ljdh alkjhf sldkjfh sdlkfh sadljfkhas dlkjf h</p>
        <p>dslkjhfaslkhf dkjh aslkhf ljdh alkjhf sldkjfh sdlkfh sadljfkhas dlkjf h</p>
        <p>dslkjhfaslkhf dkjh aslkhf ljdh alkjhf sldkjfh sdlkfh sadljfkhas dlkjf h</p>
    </div>
</div>

CSS

body{margin:0px; padding:0px; background:#fff;}
#bg{position:relative; z-index:1; overflow:hidden; top:35px; left:35px;}

/*#bgimg{display:none;}*/

#wrapper{
	width:100%;
	margin-top:70px;
	background-color:#900;
	}
.contenuti{
	margin:auto;
	width:70%;
	background-color:#0CF;
}
.contenuti p{
	padding:0;
	margin:0;
}

#mainimage {
    position:relative;
    /*height: 510px; /* stessa altezza dell'iimagine di bg ma si può anche fare meno */
	background:   url("http://www.piedicosta.com/jnuovo/images/big.jpg") no-repeat center center;
	height:100%;
    background-size:cover;
	/*border:35px solid #FFF;
	background-color:#CC3;
	margin:0;
	padding:0;*/
    /*box-shadow:inset 0 -1px 5px rgba(0,0,0,0.6); */
}

JavaScript

$theBorder=35; //border around image (change top and left values of #bg accordingly)
$bg=$("#bg");

$bgimg=$("#bg #bgimg");

$preloader=$("#preloader");
//]]> 

$(window).load(function() {
	FullScreenBackground($bgimg,$bg);

	$(window).resize(function() {
		FullScreenBackground($bgimg,$bg);
	});
});

$bgimg.load(function() {
	var $this=$(this);
	FullScreenBackground($this,$bg);
	$preloader.fadeOut("fast");
	$this.delay(200).fadeIn("slow");
});

function FullScreenBackground(theItem,theContainer){
	var winWidth=$(window).width();
	var winHeight=$(window).height();
	var imageWidth=$(theItem).width();
	var imageHeight=$(theItem).height();
	var picHeight = imageHeight / imageWidth;
	var picWidth = imageWidth / imageHeight;
	if ((winHeight / winWidth) < picHeight) {
		$(theItem).css("width",winWidth);
		$(theItem).css("height",picHeight*winWidth);
	} else {
		$(theItem).css("height",winHeight);
		$(theItem).css("width",picWidth*winHeight);
	};
	$(theContainer).css("width",winWidth-($theBorder*2));
	$(theContainer).css("height",winHeight-($theBorder*2));
	$(theItem).css("margin-left",(winWidth- $(theItem).width())/2);
	$(theItem).css("margin-top",(winHeight- $(theItem).height())/2);
}
// <![CDATA