Dynamically Resize Background Images with jQuery

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!

jQuery Autostretch

About Phillihp Harmon

I'm Phillihp. My name can be spelled the same way forwards and backwards, so can my posts... if you wish. I'm out here exploring, learning, and sharing what I find. This is more for fun and personal growth, I aim to be as consistent as possible, so check back daily!
This entry was posted in Browsers, Design, DIY, HTML5/CSS3, Internet, JavaScript. Bookmark the permalink.

One Response to Dynamically Resize Background Images with jQuery

Leave a Reply

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