Monday, July 06, 2009

My first jQuery plugin

I had this issue with a background image (fancy diagonal gradients) that wouldn't stretch to fill the element. Was it so hard to just add a CSS thingie in your browsers, guys? What? If W3C couldn't think this one through you couldn't fix it?

Well, anyway, since I started working with jQuery, I thought why not create my own plugin? I started with this excelent tutorial and worked my way upwards.

This plugin will add an absolutely positioned image with z-index -1 (it seems it works) and then stretch it to fit the target element. It automatically restretches it on resize, but if you need to manipulate the target element manually, like drag it around, there is a refreshBackgroundImage function associated with the element for you to use.

You can download the latest source here: Please let me know, either here or on the project page, if there is anything that works better than the current version.


Anonymous said...

Hi, thanks for your great plugin. An example somewhere would create more interest in this plugin I think.

Anonymous said...

Yea I'm looking for a plugin to do this with a header image, would be nice to check out an example before hand to make sure it fits.