Home > HTML / CSS, JavaScript > Howto: 100% height and width background image (CSS / JavaScript)

Howto: 100% height and width background image (CSS / JavaScript)

January 22nd, 2010

Hello everyone

Somewhen every frontend developer will be faced with the problem that you cannot stretch a background image to 100% height and width by default (except CSS3 compatible browsers). This is very annoying if the background image contains a gradient or something else which can not be repeated. Now I will show you how to realize such a solution with min-height and min-width support which works in all browsers (IE6, IE7, IE8, Safari, Chrome, Firefox and Opera).

For the impatiant people here is a LIVE DEMO for all others is the example below.

  1. Let’s say this is our basic HTML website where we have to add the 100% height and width background 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Background 100% width and heigth example</title>
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css" />
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
        <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js%262.8.0r4/build/selector/selector-min.js"></script>
        <script type="text/javascript" src="js/background.js"></script>
    </head>
    <body>
        <div id="background"><img src="img/background.jpg" alt="background" /></div>
    </body>
</html>

    This is our background image. Make sure it is always at the top of the HTML body.

    <div id="background"><img src="img/background.jpg" alt="background" /></div>
  2. Create a CSS style sheet with the following content 
    html, body {
	width: 100%;
	height: 100%;
	min-height: 500px;
	min-width: 500px;
}

#background {
	width: 100%;
	height: 100%;
	z-index: -1;
}

#background img {
	width: 100%;
	height: 100%;
}
  3. I used YUI 2 for the JavaScript part but you can change it very easily to any other JavaScript library. So here is the file. 
    /**
* Set the background size
*
* Resize the background when the browser window gets loaded or resized
* Written by Pascal Beyeler (anvio.ch)
*
* @param		e		event object
* @return		void
*/

function setBackgroundSize(e) {

	//min height and width
	var minWidth = 500;
	var minHeight = 500;

	var background = YAHOO.util.Selector.query('div#background img')[0];
	var viewportWidth = YAHOO.util.Dom.getViewportWidth();
	var viewportHeight = YAHOO.util.Dom.getViewportHeight();

	if(viewportWidth > minWidth) {
		document.body.style.width = viewportWidth + 'px';
	} else {
		document.body.style.width = minWidth + 'px';
	}
	if(viewportHeight > minHeight) {
		document.body.style.height = viewportHeight + 'px';
	} else {
		document.body.style.height = minHeight + 'px';
	}

}

//subscribe to the events
YAHOO.util.Event.onDOMReady(setBackgroundSize);
YAHOO.util.Event.addListener(window, 'resize', setBackgroundSize);

    That’s it! You just have to change the minHeight and minWidth variable to your needs.

    Have fun :)

Categories: HTML / CSS, JavaScript Tags:
  1. TJ
    January 26th, 2010 at 14:04 | #1
    Reply | Quote

    Nice to see how this is done with YUI. Keep up the good work!

Comments are closed.