Full screen background image

//-------------------------------------------------
//  Images Fullscreen

function fullbg(wrapper) {

$(wrapper).each(function() {
var $self = $(this),
$iWidth = $self.find('> img').width(),
$iHeight = $self.find('> img').height(),
$wWidth = $self.width(),
$wHeight = $self.height(),
iRatio = $iWidth / $iHeight,
wRatio = $wWidth / $wHeight,
vspace = ($wWidth - ($wHeight * iRatio)) / 2,
hspace = ($wHeight - ($wWidth / iRatio)) / 2;

if(iRatio >= wRatio) {
$self.find('> img').css({
width: $wHeight * iRatio + 'px',
height: $wHeight + 'px',
marginLeft: vspace + 'px'
})
} else {
$self.find('> img').css({
width: '100%',
height: 'auto',
marginTop: hspace + 'px'
})
}

$self.find('> img').animate({
opacity: 1
}, 600);
});
}


//-------------------------------------------------
//  Window Load

$(window).load(function() {
fullbg('.fullbg');
});

//-------------------------------------------------
//  Window Resize

$(window).resize(function() {
fullbg('.fullbg');
});

See the Pen Image Fullscreen by John (@herr_john) on CodePen