Skip to content

Instantly share code, notes, and snippets.

@josephspurrier
Last active August 29, 2015 14:04
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
Center a Background Image on a Webpage
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment