Perfect responsive fullscreen backgrounds

Here are two ways to have fullscreen backgrounds, also 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>

    <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>Example content<br><br><br>

</div>

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

html, body {

    /* any div up to fullscreen-cont must have this

    in this case html and body */

    height:100%;

    min-height:100%;

    margin:0;

}

.fullscreen-cont {

    display:block;position:relative;

    min-width:100%;

    min-height:100%;

    margin-bottom:2px;

}

.fullscreen-img {

    display:block;position:absolute;z-index:-1;

    min-width:100%;

    min-height:100%;

    background:transparent url('http://placehold.it/1240x885') center center no-repeat;

    background-size:cover;

}

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">

</div>

<div class="fullscreen-cont">

    <img class="fullscreen-img" src="http://placehold.it/1240x885">

    <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>Example content<br><br><br>

</div>

And the css code:

html, body {

    /* any div up to fullscreen-cont must have this

    in this case html and body */

    height:100%;

    min-height:100%;

    margin:0;

}

.fullscreen-cont {

    display:block;position:relative;

    min-width:100%;

    min-height:100%;

    overflow:hidden;

    margin-bottom:2px;

}

.fullscreen-img {

    display:block;position:absolute;z-index:-1;

}

And finally the javascript code, remember to include jquery:

function afterLoad(path){

    // here you can put animations

    // this get executed when the image is loaded

}

function loadImage(path, func){

    var oldSrc = path.attr('src');

    path.attr('src', '').load(function(){

        var cont = $(this).closest('.fullscreen-cont');

        resizeImage(path, getMaxW(cont), getMaxH(cont), true);

        afterLoad(path);

    });

    path.css("display","none").attr('src', oldSrc);

}

function resizeImage(path, w, h, afterLoad){

    // save data

    if(afterLoad || path.data("w") == 0){

        path.css("display","block");

        path.data("w", parseFloat(path.width()));

        path.data("h", parseFloat(path.height()));

    }

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

    path.css("left", - (wfinal - w) / 2);

    path.css("top", - (hfinal - h) / 2);

}

function getMaxW(path){

    var w = $(window).width();

    var overflowW = path.width();

    if(overflowW > w){w = overflowW;}

    return w;

}

function getMaxH(path){

    var h = $(window).height();

    var overflowH = path.height();

    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)), false);

    });

});