jQuery Plug-in: Scalable Background Image

Published: Feb 17, 2010 Read time: 2 mins

A few days ago a friend approached me about an interesting background effect he has seen on a website and how he wanted to implement it into his website. I was curious about how it worked so decided to build a jQuery plug-in that does it for you; hooray for jQuery (again).

The effect is a scalable background image; as you expand / contract the browser window the background image scales up and down with respectively. Unfortunately it isn’t possible to do using only CSS 2.1; it’s possible using CSS3 using the background-size property, though not yet widely supported. The technique doesn’t use a background image, it uses an absolutely positioned image to achieve the same effect; so it could be considered a hack. If you’re not sure what I mean, here’s a demo. It’s quite simple to use; here’s the basic HTML:

The plug-in accepts an object as an argument with custom user settings:

imageSelector: The ID or class of the fake background image (default: “#bgImage”).

centerAlign: Align the image in the center of the container, both vertically and horizontally (default: true).

containerPadding: Padding in pixels that expands the image slightly in relation to it’s container to minimise seeing behind the image when scaling up and down in certain browsers (default: 80).

A couple of things to note:

You must have a container div for the image, using the body tag returns strange results.

The resize event in Firefox is a little weird, it doesn’t fire continuously as you scale up and down so you can sometimes see the container background when scaling. There are plug-ins that make the resize event consistent across browsers.

Since this is a JavaScript dependent effect it may be worth adding the fake background image using JavaScript

It’s better to use a larger image for scaling, as expanding a smaller image will look fuzzy and out of focus.