Perfect responsive fullscreen backgrounds

Css and jQuery solutions with content overflow and document stacking

Css only solution

This css only solution is made possible thanks to the background-size feature, too bad it's not supported on IE8 and lower.

Here's the html code:

<div class="fullscreen-cont">
    <div class="fullscreen-img"></div>
</div>
<div class="fullscreen-cont">
    <div class="fullscreen-img"></div>
</div>
<div class="fullscreen-cont">
    <div class="fullscreen-img"></div>
    <div class="content">
        <br><br><br>Example content<br><br><br>Example content<br><br><br>Example content<br><br><br>Example content<br><br/><br>Example content<br><br><br>
    </div>
</div>

And the css code, set your image in the .fullscreen-img background:

/* fullscreen setup */
html, body {
    /* any div up to fullscreen-cont must have this
    in this case html and body */
    height:100%;
    min-height:100%;
}
.fullscreen-cont,
.fullscreen-img {
    display:block;
    position:relative;
    min-width:100%;
    min-height:100%;
}
.fullscreen-img {
    display:block;
    position:absolute;
    z-index:1;
    min-width:100%;
    min-height:100%;
    /* background position when .fullscreen-img overflows */
    background:transparent url('http://placehold.it/1240x885') center center no-repeat;
    background-size:cover;
}
.content {
    display:block;
    position:relative;
    z-index:2;
}

Jquery solution

The jquery solution works also on IE8- and you can assign animations when the images has been loaded.

Here's the html code, set your image in the img tag:

<div class="fullscreen-cont">
    <img class="fullscreen-img" src="http://placehold.it/1240x885">
</div>
<div class="fullscreen-cont">
    <img class="fullscreen-img" src="http://placehold.it/1240x885" data-w-scale="0" data-h-scale="0">
</div>
<div class="fullscreen-cont">
    <img class="fullscreen-img" src="http://placehold.it/1240x885" data-w-scale="1.5" data-h-scale="1.5">
    <div class="content">
        <br><br><br>Example content<br><br><br>Example content<br><br><br>Example content<br><br><br>Example content<br><br/><br>Example content<br><br><br>
    </div>
</div>

And the css code:

/* fullscreen setup */
html, body {
    /* all the tags up to .fullscreen-cont must have this style */
    height:100%;
}
.fullscreen-cont,
.fullscreen-img {
    display:block;
    position:relative;
    min-width:100%;
    min-height:100%;
    overflow:hidden;
}

/* content styles */
.fullscreen-img {
    display:block;
    position:absolute;
    z-index:1;
    display:none;
}
.content {
    display:block;
    position:relative;
    z-index:2;
}

And finally the javascript code, remember to include jquery:

/* data-w-scale on fullscreen-img
data-w-scale="2" = center orizzontally
data-w-scale="1" = align right
data-w-scale="0" = align left
data-w-scale="1.5" = custom value
*/
/* data-h-scale on fullscreen-img
data-h-scale="2" = center vertically
data-h-scale="1" = align bottom
data-h-scale="0" = align top
data-h-scale="1.5" = custom value
*/
function afterLoad(path){
    path.css("display", "block");
    // here you can put animations
    // this get executed when the image is loaded
}
function getClone(path){
    // get values
    var clone = path.clone();
    clone.css("visibility","hidden");
    $("body").append(clone);
    var o = {};
    o.w = clone.width();
    o.h = clone.height();
    clone.remove();
    return(o);
}
function loadImage(path, func){
    var oldSrc = path.attr('src');
    path.attr('src', '').load(function(){
        var o = getClone(path);
        path.data("w", o.w);
        path.data("h", o.h);
        // resize
        var cont = $(this).closest(".fullscreen-cont");
        resizeImage(path, getMaxW(cont), getMaxH(cont));
        afterLoad(path);
    });
    path.attr('src', oldSrc);
}
function resizeImage(path, w, h){
    // variables
    var winit = path.data("w");
    var hinit = path.data("h");
    var ratio = winit/hinit;
    var wdiff = (w - winit);
    var hdiff = (h - hinit) * ratio;
    // resize image
    if(wdiff > hdiff){
        wfinal = w;
        hfinal = w / ratio;
    }else{
        wfinal = h * ratio;
        hfinal = h;
    }
    path.css("width", wfinal);
    path.css("height", hfinal);
    // center image
    var wScale = path.attr("data-w-scale");
    if(wScale === undefined){wScale = 2;}
    var hScale = path.attr("data-h-scale");
    if(hScale === undefined){hScale = 2;}
    path.css("left", - (wfinal - w) / wScale);
    path.css("top", - (hfinal - h) / hScale);
}
function getMaxW(path){
    var w = $(window).width();
    var o = getClone(path);
    var overflowW = o.w;
    if(overflowW > w){w = overflowW;}
    return w;
}
function getMaxH(path){
    var h = $(window).height();
    var o = getClone(path);
    var overflowH = o.h;
    if(overflowH > h){h = overflowH;}
    return h;
}
$('.fullscreen-img').each(function(i){
    loadImage($(this));
});
$(window).resize(function(){
    $('.fullscreen-cont').each(function(i){
        resizeImage($(this).find(".fullscreen-img"), getMaxW($(this)), getMaxH($(this)));
    });
});