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:
<!-- Content here -->
<!-- This Image will resize with every window resize -->
<img id="imageID" src="images/our-image.jpg" alt="Fake background image" >
The plug-in is called using (with custom settings):
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.
- It’s better to use a larger image for scaling, as expanding a smaller image will look fuzzy and out of focus.