Fullscreen backgrounds with centered content

Responsive background images with content centering and overflow

Updated
14/11/2015 - Fixed fullscreen on webkit, changed overflow class

The Solution

Demo
Demo
Demo and source code

Here's a simple Css and jQuery solution to have fullscreen backgrounds that supports: vertical and orizzontal centering of content, content overflow (the background scale to fit content if it's higher than the window) and also do full-size backgrounds relative to the container (by using .not-fullscreen class instead of .fullscreen)

If you want to animate the backgrounds with scroll parallax check out the parallax backgrounds with centered content solution.

If you don't need centered content you can remove the .content-a and .content-b tags and Css.

The Markup

To have fullscreen background images, use the class .fullscreen to have fullscreen div, and .background to have the background size adjustments.

You have to apply the background-image style using the url of the image you want as background. The data-img-width and data-img-height attributes, with the pixel values of the background's width and height, are obligatory.

<div class="fullscreen background" style="background-image:url('http://www.minimit.com/images/picjumbo.com_IMG_6648.jpg');" data-img-width="1600" data-img-height="1064">
    <div class="content-a">
        <div class="content-b">
            Centered content
        </div>
    </div>
</div>

The div and the background will have automatic overflow if the div content is higher than the window.

Tip: you can use the same code with only the .fullscreen class and .content-a .content-b divs to have fullscreen centered content.

<section class="fullscreen">
    <div class="content-a">
        <div class="content-b">
            Centered content
        </div>
    </div>
</section>

If you want to preserve the height of the div, instead of having it fullscreen, just use the .not-fullscreen class instead of .fullscreen

<div class="not-fullscreen background" style="background-image:url('http://www.minimit.com/images/picjumbo.com_IMG_6643.jpg');" data-img-width="1600" data-img-height="1064">
    <div class="content-a">
        <div class="content-b">
            Centered content
        </div>
    </div>
</div>

The Css

We set up the .background: you can set any background-position you want, the one with ie8- graceful degradation is needed to have proper centering on Internet Explorer 8-, since it will not scale the image.

/* background setup */
.background {
    background-repeat:no-repeat;
    /* custom background-position */
    background-position:50% 50%;
    /* ie8- graceful degradation */
    background-position:50% 50%9 !important;
}

Then just use the Css for fullscreen and content centering. Be sure to give height:100% to all tags from html to the divs with .fullscreen.

/* fullscreen setup */
html, body {
    /* give this to all tags from html to .fullscreen */
    height:100%;
}
.fullscreen,
.content-a {
    width:100%;
    height:100%;
    overflow:hidden;
}
.fullscreen.overflow,
.fullscreen.overflow .content-a {
    height:auto;
    min-height:100%;
}

/* content centering styles */
.content-a {
    display:table;
}
.content-b {
    display:table-cell;
    position:relative;
    vertical-align:middle;
    text-align:center;
}

The jQuery

Alert
Remember to include the jQuery library.

Just copy and paste all the jQuery after all the markup (just before the closing body tag), remember to use fullscreenFix() in case the .fullscreen content changes (it set overflow if needed).

/* fix vertical when not overflow
call fullscreenFix() if .fullscreen content changes */
function fullscreenFix(){
    var h = $('body').height();
    // set .fullscreen height
    $(".content-b").each(function(i){
        if($(this).innerHeight() > h){
            $(this).closest(".fullscreen").addClass("overflow");
        }
    });
}
$(window).resize(fullscreenFix);
fullscreenFix();

/* resize background images */
function backgroundResize(){
    var windowH = $(window).height();
    $(".background").each(function(i){
        var path = $(this);
        // variables
        var contW = path.width();
        var contH = path.height();
        var imgW = path.attr("data-img-width");
        var imgH = path.attr("data-img-height");
        var ratio = imgW / imgH;
        // overflowing difference
        var diff = parseFloat(path.attr("data-diff"));
        diff = diff ? diff : 0;
        // remaining height to have fullscreen image only on parallax
        var remainingH = 0;
        if(path.hasClass("parallax")){
            var maxH = contH > windowH ? contH : windowH;
            remainingH = windowH - contH;
        }
        // set img values depending on cont
        imgH = contH + remainingH + diff;
        imgW = imgH * ratio;
        // fix when too large
        if(contW > imgW){
            imgW = contW;
            imgH = imgW / ratio;
        }
        //
        path.data("resized-imgW", imgW);
        path.data("resized-imgH", imgH);
        path.css("background-size", imgW + "px " + imgH + "px");
    });
}
$(window).resize(backgroundResize);
$(window).focus(backgroundResize);
backgroundResize();