Full Size Background Image jQuery Plugin: Redux
by c.bavota | Posted in Downloads | 122 comments
I 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.



great jquery tutorial, but it’s really resource-consuming; because it’s just background, and css takes care of the background.
thanks for the jquery plug-ing; because i didn’t know about it before.
GRACIAS MI REY ESTUVO LIIIIIINDO
TE AMOOOOOOOOOOOO
Hello.
Can you give a discription on how to make this work in wordpress?
Thanks, Jonathan
I Would love to see this in action on WordPress and then hear how to do it.. have been struggling with this problem for a whole day..
Hi guys, Making this work in WordPress shouldn’t be too difficult. It’s all the same concept; it just depends on how your theme works. I’ll be working on this later today or tomorrow if you still need help.
I’m also going to try to implement this in WordPress. It’s a great way to finally get rid of the static white background and get something more suitable to the blog.
Nice trick, but you need a large image to be able to resize it to every window size.
@Jonathan & @Dylan: It is better to ask your question here: http://support.bavotasan.com/
That all depends on the effect you want. I had a client who wished to use a smaller image so that it would be heavily pixelized when it fit the browser window.
Awesome thing. Don’t forget the width: 100%; for #maincontent
Thx for the tip, that was just my fault…..it saves me a lot of time to find the error…good work mate
wow excellent tip i was trying to use that thing in one of my website but was not able to resize that, now i will try the above method, hope it will work now.
Nice jQuery plugin. I’ve just downloaded it and it works like a charm.
Great work….. unfortnately need to get it to work in IE6….aaaaah! is there any work around for IE6 – tried it but it doesn’t resize image and doesn’t sit top and left.
It is really hard to get things to work properly with IE6. I am a firm believer that people need to upgrade.
It appears that with the release of Safari 5, the image is being treated like you have styled it for position:fixed rather than position:absolute regardless of how you specify the css.
You can fix it by waiting to call the function until the image is fully loaded. Like this:
$('img#background').load( function() { jQuery(function($) { $('img#background').fullBg(); }); });That will work perfectly.
This is a great script, thanks.
Would it be able to be integrated with something so at a minimum width and height it stopped resizing and the page had scrollbars instead?
Wow, very nice and clean code, works like a charm
One question though – would it be a huge headache to amend it to allow for images to be aligned to anything other than the upper left corner? Or am I missing something obvious here?
Very grateful for any response and many thanks for sharing in the first place
You can mess around with the absolute positioning so that it is anchored wherever you like.
Great, thanks for pointing me in the right direction
It’s possible to avoid download the background image?
Great stuff here! This one didn’t break my code (unlike other plugins such as maxImage). I have my own $windows.resize() function implemented(re-initializing jScrollPane when resizing)and it looks like your plugin didn’t break my function.
Thanks so much for this tutorial….its very helpful. The only thing is that I was having some trouble with the background going behind the content wrapper (wrapper stays fixed) when I change the browser window size.
Do you know how I can make the content wrapper sync with the background and go with it every time I change the browser window size?
This is awesome! I have been trying to solve this with a site of mine. I wonder what it does when gets hit by a mobile browser since the aspect ratios are different.
David, interesting question. There is a site you can use to show how your page appears in all kinds of browsers called Browsershots. An excellent resource for web designers to test their sites.
Thanks, for the tip on the browser website. It will come in useful, I am going to try it out.
Thanks for the browsershots tip, works a treat.
what a great plugin/code snippet i especially love this site, very nice. It makes you want to stay here and navigate what else there is. Very well done!!
Thank you
I love this! Great job!
However: I’ve tested your demo (and mine), and all background images do not have the right proportions. They’re all stretched out horizontally, making my head look really wierd.
I’ve tested them in Mac OS 10.5 and Safari, Chrome and Firefox, all latest version.
-Kris
I think the latest versions are making it act a bit funky. I will have to do some testing.
I tried this plug in and the content in my site was all stretched out.
So I guess the attempt to add it to the theme did not work?
maybe you have forgotten the width 100%
same problem with me….
greetz
Hi there,
Great plugin! I’ve extended the resize function a little bit so that the image also centers(with negative positioning left & right)
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; var topPos = -(heightdiff-winheight) /2; var leftPos = -(widthdiff-winwidth) /2; if(heightdiff>winheight) { bgImg.css({ width: winwidth+'px', height: heightdiff+'px', left:"0px", top:topPos+"px" }); } else { bgImg.css({ width: widthdiff+'px', height: winheight+'px', left:leftPos+"px", top:"0px" }); } }I tried this plug in and the content in my site was all stretched out.
well I have to admit it, this is one of the bests blogs of jquery that i’ve read. Keep it this way. (sorry for my english, i’m spaniard)
BTW, could you show us a real example of a website using this effect?
I am news to jquery and I have been enjoying a lot in working in it and the plugin you have posted was simply amazing.I have just started.
Hi, this plugin is awesome! I made a slight adjustment though to account for people who have javascript turned off.
First, add this to your CSS:
#background {display: none;}Then, right before
$('#background').fullBg();is called, add the following code:
$("#background").show();This way, people who don’t (or can’t) use Javascript won’t see a huge image on the page.
Thanks.
Also, for anyone who needs this plugin to work for IE6, insert the following after the plugin call:
Works like a charm.
Thanks Aaron. That works a charm. Not sure if it’s needed for my site but its better to be safe than sorry.