Updated Fullscreen Background
/* fix vertical when not overflow
call fullscreenFix() if .fullscreen content changes */
function fullscreenFix(){
var h = $('body').height();
// set .fullscreen height
$(".content-holder").each(function(i){
if($(this).innerHeight() <= h){
$(this).closest(".fullscreen").addClass("not-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();
<div class="fullscreen background" data-img-width="1600" data-img-height="1064">
<div class="content-wrapper">
<div class="content-holder">
Centered content
</div>
</div>
</div>
html, body {
/* give this to all tags from html to .fullscreen */
height:100%;
}
.fullscreen,
.content-wrapper {
width:100%;
min-height:100%;
}
.not-fullscreen,
.not-fullscreen .content-wrapper,
.fullscreen.not-overflow,
.fullscreen.not-overflow .content-wrapper {
height:100%;
overflow:hidden;
}
/* content centering styles */
.content-wrapper {
display:table;
}
.content-holder {
display:table-cell;
position:relative;
vertical-align:middle;
text-align:center;
}
/*WooCommerce*/
.woocommerce #content div.product div.thumbnails a, .woocommerce div.product div.thumbnails a, .woocommerce-page #content div.product div.thumbnails a, .woocommerce-page div.product div.thumbnails a{
margin-bottom: 3.8%;
}