The Flexible Scalable Background Image

This is an approach to set up a full-window background image which scales to window size, but doesn’t get smaller than a certain, predefined size. It is an update to an older approach which I published in 2009. This update takes advantage of CSS3 capabilities to achieve the desired effect and falls back to Javascript when the necessary CSS isn’t supported. This also means it now works in iOS devices, as well as in all major desktop browsers.

Setup

In order to utilize this, you’ll need to include the flexi-background JavaScript and CSS files in your site. There are a few configurations and tweaks to make, as follows:

The CSS

First thing to do is to define the background image you want to use on the body element:

body { 
	background-attachment:		fixed;
	background-color:		#333;
	background-image:		url(/path/to/your/background/image.jpg); 
	background-position:		top center; 
	background-repeat:		no-repeat; 
	margin:				0;
	padding:			0;
	background-size:		cover;
	-moz-background-size:		cover;
	-webkit-background-size:	cover;
}

Feel free to change other background properties like background-color and background-position, but the rest of the definition should stay as is. The next definition also needs your attention. It is:

@media only all and (max-width: 640px) and (max-height: 426px) {
	body {		
		background-size:			640px 426px;
		-moz-background-size:		640px 426px;
		-webkit-background-size:	640px 426px;
	}
}

You need to change the height and width values there to match the the native size of your background image. This will be the threshold below which your image will not scale smaller. The trick here is to size your background image to something that works well across many different window sizes. You’ll typically have the best results if you choose an image with a landscape orientation and size it to be about the same width as your page content. Note that if you don’t match the image size, you’ll get unpredictable jumpiness when resizing the window in the browsers that don’t support background-size.

The JavaScript

There’s only one piece to configure in the JavaScript. Go ahead and find the following right at the top of the script:

var bgImageSize = {
	width	: 640,
	height	: 426
};

Those height and width values should be changed to match the minimum height and width threshold you set up in the CSS above.

That’s it—there’s nothing more to configure. Enjoy!