Perfect responsive fullscreen backgrounds - css only solution

HTML

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

CSS

html, body {
    /* any div up to fullscreen-cont must have this
    in this case html and body */
    height:100%;
    min-height:100%;
}
.fullscreen-cont {
    display:block;position:relative;
    min-width:100%;
    min-height:100%;
    width:100%;
    height:100%;
}
.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;
}
.content {
    position:relative;z-index:2;
}
.cont-content-a {
	display:table;
	width:100%;
    height:100%;
}
.cont-content-b {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}

/* custom setting */
body{
    margin:0;
    color:#ffffff;
    font-size:40px;
    text-align:center;
    font-family:sans-serif;
}
.fullscreen-cont {
    margin-bottom:2px;
}