josephspurrier/centerbackground.htm

## centerbackground.htm
<!DOCTYPE html>
<html lang="en" style="overflow: auto; height: 100%;">
<body style="background: #222222; margin: 0; height: 100%;">
<div style="overflow: hidden; height: 100%;">
<img id="background-image" src="https://www.gstatic.com/chat/hangouts/bg/a432eb7bf6eef1cccf7946ca20e5c2c0-NeilKremer.jpg">
</div>

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<script type="text/javascript">

jQuery(function() {
    jQuery('#background-image').centerBackground();
});

jQuery.fn.centerBackground = function() {
    // Get the background image
    var i = jQuery(this.filter('img')).first();

    // If the class is on an image
    if (i.length)
    {
        // Wait for the images to load
        jQuery(window).load(function() {
            // Center the background image on initial load
            centerImage(i);

            // Center the background image on page resize
            jQuery(window).resize(function() {
                centerImage(i);
            });
        });
    }
    else
    {
        console.log('The function, centerBackground(), was not called on a valid image.');
    }

    function centerImage(bImage)
    {
        // Get the window dimensions
        var wHeight = jQuery(window).height();
        var wWidth = jQuery(window).width();

        // Get the image dimensions
        var imgSize = bImage.realSize();
        var imgRatio = imgSize.width / imgSize.height;

        // Default image size
        var imgNewWidth = wWidth;
        var imgNewHeight = wWidth / imgRatio;

        // Default image placement
        var imgNewTop = 0;
        var imgNewLeft = 0;

        // If the image height is smaller than the window
        if (imgNewHeight < wHeight)
        {
            // Set the image width equal to the window * ratio
            imgNewWidth = wHeight * imgRatio;

            // Set the image height equal to the winow / ratio
            imgNewHeight = imgNewWidth / imgRatio;

            // Center the image from the right
            imgNewLeft = -((imgNewWidth-wWidth) / 2);
        }
        // Else if the window height is smaller than the image
        else if (wHeight < imgNewHeight)
        {
            // Center the image from the bottom
            imgNewTop = -((imgNewHeight-wHeight) / 2);
        }

        // Set the image size
        bImage.width(imgNewWidth);
        bImage.height(imgNewHeight);

        // Set the image placement
        bImage.css('top', imgNewTop + 'px');
        bImage.css('left', imgNewLeft + 'px');
        bImage.css('position', 'relative');
    }
}

// Source: http://css-tricks.com/snippets/jquery/get-an-images-native-width/
jQuery.fn.realSize = function() {
    var i = jQuery(this.filter('img')).first();
    if (i.length) {
        if(!i.data('realSize')) {
            var _w = i.width(),
                _h = i.height();
            i.width('auto').height('auto');
            i.data('realSize', { width: i.width(),
                                  height: i.height()});
            i.width(_w).height(_h);
        }
        return i.data('realSize');
    }

    return undefined;
};

</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en" style="overflow: auto; height: 100%;">
	<body style="background: #222222; margin: 0; height: 100%;">
	<div style="overflow: hidden; height: 100%;">
	<img id="background-image" src="https://www.gstatic.com/chat/hangouts/bg/a432eb7bf6eef1cccf7946ca20e5c2c0-NeilKremer.jpg">
	</div>

	<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

	<script type="text/javascript">

	jQuery(function() {
	jQuery('#background-image').centerBackground();
	});

	jQuery.fn.centerBackground = function() {
	// Get the background image
	var i = jQuery(this.filter('img')).first();

	// If the class is on an image
	if (i.length)
	{
	// Wait for the images to load
	jQuery(window).load(function() {
	// Center the background image on initial load
	centerImage(i);

	// Center the background image on page resize
	jQuery(window).resize(function() {
	centerImage(i);
	});
	});
	}
	else
	{
	console.log('The function, centerBackground(), was not called on a valid image.');
	}

	function centerImage(bImage)
	{
	// Get the window dimensions
	var wHeight = jQuery(window).height();
	var wWidth = jQuery(window).width();

	// Get the image dimensions
	var imgSize = bImage.realSize();
	var imgRatio = imgSize.width / imgSize.height;

	// Default image size
	var imgNewWidth = wWidth;
	var imgNewHeight = wWidth / imgRatio;

	// Default image placement
	var imgNewTop = 0;
	var imgNewLeft = 0;

	// If the image height is smaller than the window
	if (imgNewHeight < wHeight)
	{
	// Set the image width equal to the window * ratio
	imgNewWidth = wHeight * imgRatio;

	// Set the image height equal to the winow / ratio
	imgNewHeight = imgNewWidth / imgRatio;

	// Center the image from the right
	imgNewLeft = -((imgNewWidth-wWidth) / 2);
	}
	// Else if the window height is smaller than the image
	else if (wHeight < imgNewHeight)
	{
	// Center the image from the bottom
	imgNewTop = -((imgNewHeight-wHeight) / 2);
	}

	// Set the image size
	bImage.width(imgNewWidth);
	bImage.height(imgNewHeight);

	// Set the image placement
	bImage.css('top', imgNewTop + 'px');
	bImage.css('left', imgNewLeft + 'px');
	bImage.css('position', 'relative');
	}
	}

	// Source: http://css-tricks.com/snippets/jquery/get-an-images-native-width/
	jQuery.fn.realSize = function() {
	var i = jQuery(this.filter('img')).first();
	if (i.length) {
	if(!i.data('realSize')) {
	var _w = i.width(),
	_h = i.height();
	i.width('auto').height('auto');
	i.data('realSize', { width: i.width(),
	height: i.height()});
	i.width(_w).height(_h);
	}
	return i.data('realSize');
	}

	return undefined;
	};

	</script>

	</body>
	</html>