Deepzign: Full Size Background Image jQuery Plugin

9/17/2010

Full Size Background Image jQuery Plugin

I guess I am on a jQuery plugin kick since it seems to be all I am doing lately. I just really dig how versatile the jQuery library is and all the amazing things you can do to a Web site with it. I had to create a resizing background image that would fit the full size of the browser window and this little plugin does just that.

All you need is an image you want to have as your background. Once you have that and use the plugin, the image will resize to the full width/height of the browser window. Every time the browser window resizes, so will the background image.

First comes the plugin code:

(function($) {

$.fn.fullBg = function(){

  var bgImg = $(this);		



  function resizeImg() {

    var imgwidth = bgImg.width();

    var imgheight = bgImg.height();



    var winwidth = $(window).width();

    var winheight = $(window).height();



    var widthratio = winwidth / imgwidth;

    var heightratio = winheight / imgheight;



    var widthdiff = heightratio * imgwidth;

    var heightdiff = widthratio * imgheight;



    if(heightdiff>winheight) {

      bgImg.css({

        width: winwidth+'px',

        height: heightdiff+'px'

      });

    } else {

      bgImg.css({

        width: widthdiff+'px',

        height: winheight+'px'

      });		

    }

  }

  resizeImg();

  $(window).resize(function() {

    resizeImg();

  });

};

})(jQuery)

There is only a little CSS needed for this one:

.fullBg {

position: absolute;

top: 0;

left: 0;

overflow: hidden;

width: 100%;

}



#maincontent {

position: absolute;

top: 0;

left: 0;

z-index: 50;

}

If you want your background to stay fixed you can change the .fullBG CSS to this:

.fullBg {

position: fixed;

top: 0;

left: 0;

overflow: hidden;

width: 100%;

height: 100%;

}

For the HTML markup, you can just add an image tag with an id or class, but you also need to add a div that contains your main content or else it won’t work properly. This is the bare minimum:

<img src="your-background-image.jpg" alt="" id="background" />

<div id="maincontent">



div>

To call the jQuery function just use this:

(function($) {

$("#background").fullBg();

})(jQuery)

Once again, this plugin is pretty simple so no options are available. It pretty much just does what it does.

Download Demo

9/17/2010

Full Size Background Image jQuery Plugin

No comments: