jQuery is now by far, the leading JavaScript framework out there. Sure, there is still a lot of competition with YUI, Dojo, ExtJS, Scriptaculous, and others but when you see where jQuery came from and how far they’ve gone, you know loading up jQuery on your website you will be very safe to have all the features with all the speed in the world to do some very unique things.
One of these unique things, something that’s been wanted and needed by many at one point or another, is a background image that can resize! Using HTML alone, this can be quite a tricky task with relative and absolute objects (images) that sit with custom dimensions and can be pushed behind other objects that have those same dimensions. There’s a bit to keep track of, so here’s a jQuery Autostretch plugin which does all the work for you.
Here’s a demonstration of a background image positioned center, which gives the feel of the resize, but isn’t a true solution. (move video to 40 seconds)
Here’s an actual code walk through of how to do this. (move video to 8:30 for demonstration) This video is very easy to follow.
Or, save yourself the effort and use the jQuery plugin. Enjoy!
Facebook
Twitter
email
LinkedIn
One Response to Dynamically Resize Background Images with jQuery