jQuery Plug-in: Scalable Background Image

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:

1
2
3
4
5
6
<div id="container">
    <!-- Content here -->

    <!-- This Image will resize with every window resize -->
    <img id="imageID" src="images/our-image.jpg" alt="Fake background image" >
</div>

The plug-in is called using (with custom settings):

1
2
3
4
5
6
7
8
//Plug-in usage
jQuery(function($){
    $("#container").backgroundScale({
        imageSelector: "#imageID",
        centerAlign: true,
        containerPadding: 100
    });
});

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:

  1. You must have a container div for the image, using the body tag returns strange results.
  2. 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.
  3. Since this is a JavaScript dependent effect it may be worth adding the fake background image using JavaScript
  4. It’s better to use a larger image for scaling, as expanding a smaller image will look fuzzy and out of focus.

Any questions / ideas for expanding this plug-in then leave a comment. View a demo or download (version 0.1 – updated 17th Feb 2010).

Ryan M on July 22 10 / 202 Permalink

Is there any way to get the function to be called on load? This is most noticable when the window is much smaller than the image. It isn’t scaled right away and then does a “jump” when you resize the window.

Otherwise, thanks for the plugin, I’m really glad to see this done.

Also, do you have an suggested plugin to use for making the resize event consistent across browsers?

Ryan M on July 22 10 / 202 Permalink

Edit to a previous post: In Safari, the function doesn’t work on load. The function imageManipulation() gets called, but nothing happens to the image. Any idea why?

Matt on July 22 10 / 202 Permalink

Hi Ryan,

Thanks for pointing these issues out, I will take a look at them a.s.a.p and get back to you.

Bucky on August 10 10 / 221 Permalink

Same prob as Ryan. Not scaling on load… but when resizing it works fine.

Matt on August 10 10 / 221 Permalink

Hi Bucky / Ryan,

I’ve now solved the issue in Safari. It seems that Safari doesn’t know the correct image dimensions until it’s fully loaded. This breaks the script. There are 2 solutions to this. Either add the width and height attributes to your image tag in the mark up or instead of using jQuery document ready, use the window load method.

1
2
3
4
5
6
7
jQuery(window).load(function(){
    $("#border").backgroundScale({
        imageSelector: "#gaBG",
        centerAlign: true,
        containerPadding: 100
    });
});

I’ve updated the demo to reflect these changes. You can find more info on the Safari issue here. Hope that helps!

Ryan on September 16 10 / 258 Permalink

This image does not appear until the browser is resized in IE7.

Jase on September 18 10 / 260 Permalink

I tried your demo in Flock (a Mozilla-based browser) and it doesn’t work. Not only is it herky-jerky on resize, the image never actually takes up the full screen.

I will try it in other browsers, but I am afraid that I might be missing the point. My understanding was that you were going to provide a simple method of scaling a background image in such a manner that the entire browser viewport area was covered by the image, yet the image maintained it’s proportionality. If that is the case, you demo missed the mark.

Please let me know if I am off base here. I really appreciate your writing style and your generosity, so please don’t be offended by my candor. Thanks, jase

Matt on September 19 10 / 261 Permalink

I tested in IE7 and it worked for me, I will test again. Thanks for the feedback, it all depends if you want to keep the correct image aspect ratio on resize, as the method used in the link doesn’t. But thanks for letting me know about the demo on CSS Play.

Matt on September 19 10 / 261 Permalink

Hi Jase,

I’m sorry I’ve never tested it in Flock (can’t say I’ve ever used it to be honest) but I will test and see where it is failing. Everyone is entitled to their own opinion so thanks for the feedback. I will look to see if there is anything I can do to improve the performance of the script.

rubyconvict on September 30 10 / 272 Permalink

Demo in FF 3.6.10 works great, but when I tried to do something similar following the tutorial and comments, it does not work. It would be interesting to see similar solution working with nested divs on top of the image, as real background image for website, not just an image. This image does not appear in rusty IE6. Ryan posted a link to demo that sucks too, the image gets squashed or overstretched when changing the size of the browser window. I found something better for the body:

1
background:url('./images/back.jpg') no-repeat scroll center top transparent; min-height:100%; width:100%;

tested on IE8, FF 3.6, IE6 :-0

andi_sf on October 3 10 / 275 Permalink

hello – great plug-in! Quick question – can I define a minimum size for the image so it does not scale smaller than that? Please let me know… Thanks again!

Matt on October 3 10 / 275 Permalink

Hi andi_sf,

Thanks for the reply, glad you like it. At the moment you can’t define a minimum size. Great idea though, I’ll look into implementing it for you.

andi_sf on October 5 10 / 277 Permalink

Hi Matt – thanks for your reply – I will look forward to your solution for a minimum image size!

Carsten on January 11 11 / 10 Permalink

Hi Matt,

thanks for your great plugIn. Saw this effect on a mag from Frankfurt Kunsthalle Schirn (http://www.schirn-magazin.de/). I changed the position of the div to fixed because I have a scrolling text which is higher than the scaled image (like in the mag). So on scrolling it does not show the default background now. Works fine in FF and Safari.

Matt on January 11 11 / 10 Permalink

Hi Carsen, Thanks! Glad you found it useful. Is it failing in IE6? Or IE overall?. Be careful with position: fixed in older versions of IE as it doesn’t recognise it. Do you have the code on the web somewhere I can take a look at?

Chuck Moran on January 12 11 / 11 Permalink

Greetings, Matt!

Looks like a great technique – I’m having issues making it work on my host, and I’m sure it’s a matter of my not being familiar with jQuery. Probably not uploading the proper jQuery file? In any event, to test the technique after several failed attempts to use my own code, I flat-out copied your demo page code and image and uploaded them to my host, but the scalable technique is broken. Can you pls. tell me what I’m missing? My page is at: http://discoverygrovestx.com/dev/demo.html.

Thanks!
Chuck

Matt on January 13 11 / 12 Permalink

Hi Chuck,

Looking at your demo your server seems to be throwing an internal server error when trying to load the background image script (500 Internal Server Error). I’d double check to see if everything uploaded okay then maybe use an absolute URL to point to the script e.g. http://discoverygrovestx.com/dev/js/jquery.background.image.scale-0.1.js, once it’s working change back to a relative URL if needs be.

Hope that helps!

Chuck Moran on January 13 11 / 12 Permalink

Matt,

Yep … I was missing the script file itself. Just had to RTFM and download the zip file above and now all is well.

Thanks for the great technique!

Chuck

Leave a Comment

Your email will not be published. Required fields are marked *.