jQuery With the window size change the Full Size Background

this plugin made a few changed ,because it was acting a little weird. Tested it in Safari, Chrome and Firefox and it work perfectly now. All you need is an image that you want to have displayed 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:

/**
* jQuery.fullBg
* Version 1.0
* Copyright (c) 2010 c.bavota - http://bavotasan.com
* Dual licensed under MIT and GPL.
* Date: 02/23/2010
**/
(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;
}

#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;
}

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:

alt

To call the jQuery function, add this to the bottom of your web page, right before the closing body tag:


$(window).load(function() {
$("#background").fullBg();
});

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

Download: http://www.htmldrive.net/items/download/967

Leave a comment