Full Screen scaling Background Centered Image w/- jQuery

So you want to have a background image on your website, which always fills the screen and maintains its aspect ratio? And it has to be centered, instead of focussing at the top left corner of the image?

So how do you do that?

It is possible with jQuery and the fullscreenr plugin on this page! You can find a demonstration here and as you can see it works perfectly in all javascript enabled browsers. Note that Internet Explorer needs some extra code to enable the transparent png used for the raster over the background image. If you want to add this code I would like to refer you to unitpngfix, but of course you could just not support IE6.

The code is quite self explanatory, and I’ve included comments where necessary.

Author: NanoTux
Download: Repository

Related Posts:
GD Star Rating
loading…
August 10th, 2010 | Blue | 1 Comment | Tags: background, jquery, scaleable

About The Author

Steve

Hi I am a webdeveloper based in Brisbane, Australia. Fanatical about the internet and website code and development. Hence this site, a showcase resource site for you to get the latest greatest code , scripts , apps and demos all from the one venue.

One Response and Counting...

Site Help 08.10.2010

Read Full Screen scaling Background Centered Image w/- jQuery now at http://bit.ly/9eHTHS
Reply

GD Star Rating
loading...