just made a few changed to this plugin 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:
<img src="your-background-image.jpg" alt="" id="background" />
<div id="maincontent">
<!-- Your site content goes here -->
</div> |
To call the jQuery function, add this to the bottom of your web page, right before the closing body tag:
<script type="text/javascript">
$(window).load(function() {
$("#background").fullBg();
});
</script> |
Once again, this plugin is pretty simple so no options are available. It pretty much just does what it does.
