// 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;
}