megwoo
6/25/2015 - 7:16 PM

From http://snipsave.com/#

// js to transform img src into background image

$('.home img').each(function(i, elem) {
		var img = $(elem);
		var div = $('<div class="slide-bkgd" />').css({
			background: "url(" + img.attr("src") + ") no-repeat",
			width: img.width() + "px",
			height: img.height() + "px"
		});
		img.replaceWith(div);
	});

// css to center crop image maintaining height
.home .slide-bkgd {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: 50% 50%;
	height: 430px;
	width: auto;
}


// to create a full background cover on a page with a body tag of: region-index-index

// make first line in code the image
<div class="temp-img-holder"><?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('xxx')->toHtml(); ?></div>


// apply jquery 
$('.temp-img-holder img').each(function(i, elem) {
	var img = $(elem);
	$('body').css({
		background: "url(" + img.attr("src") + ") no-repeat center center fixed"
	});
	$('.temp-img-holder').remove();
});


// css
body {
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-o-background-size: cover !important;
	background-size: cover !important;
}