Full Size Background Image jQuery Plugin: Redux
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.
What the hell, it still didn’t work? It’s called IE9.js and its hosted on Google Code, just look for it. Sorry.
Just a great plugin and I have just downloaded it.
Really happy with this plugin.
Hello.
Can you give a discription on how to make this work in wordpress?
Thanks.
Great plugin!
Is there any way to get this to work on a CSS background image that way it is not a part of the content on the page? I’d like to keep it to the style sheet only.
If an image is set as a background it cannot be resized through CSS so it would not work. You could put your image all the way at the end of your code, right before the closing body tag.
What if I have my background image in a URL in a CSS file like this :
#mybanner {
float: left;
width: 100%;
min-height: 75px;
margin-top: -35px;
padding-bottom: 10px;
text-align: center;
background-color: #363;
background-image: url(mybackgroundimage.jpg); background-repeat: no-repeat;
}
and then, in my HTML page:
My Site Title
So I have a banner with a site title and a background image in the banner.
Will this jQuery solution work ?
That probably won’t work because you can resize background images through CSS.
Thanks for the code. I will definitely give this plugin a try. You’ve got some great stuff here on your site. You’ve got some really nice content here.
This script works great in firefox and chrome but ie (8) at first pageload do not resizes the image bg. If you go back and forward through the links anything works in ie too but if try to refresh the page the image still loads without proper scaling. I used this css for the bg:
.fullBg {
position: fixed;
top: 0;
left: 0;
overflow: hidden;
height: 100%;
}
Any idea on how to fix this?
Cool plugin.
I’ll try to modify the code so the plugin changes the background image using the fade effects from jquery, something like a background gallery.
Salaaaaam … i am going to translate this post to put it on my own blog. Thanks dear
Thanks Dear for posting such a nice post.
Fantastic plugin… thanks for sharing it!
What if I have my background image in a URL in a CSS file like this :
#mybanner {
float: left;
width: 100%;
min-height: 75px;
margin-top: -35px;
padding-bottom: 10px;
text-align: center;
background-color: #363;
background-image: url(mybackgroundimage.jpg); background-repeat: no-repeat;
}
and then, in my HTML page:
My Site Title
So I have a banner with a site title and a background image in the banner.
having the same problem.
Thanks, this is a nice plugin. I played around with it and made it work with one of my Joomla sites.
Hi,
Great plugin, The page shows find in Firefox but in IE8 the div maincontent does not show. The page source has the “maincontent” and CSS. Anybody ran into this?
Thanks
FYI, your script download causes an overflow scrollbar to appear when resizing the window, where as the source in your example does not.
That’s in Safari 5 on OSX, anyway.
Thanks for letting me know. I’ll take a look and try to find the issue.
Nice plugin!
I combined your plugin and jquery scrollable. See here
However I’m also having strechted images in IE>6 and Opera. Anyone solved this issue yet?
Great blog. I might be missing something, but can’t this be done with only css?
img.source-image {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
The problem with the CSS you suggested, is that it does not maintain the aspect ration of the image, it just makes sure that the image always fills the browser window no matter what.
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.
Awesome plugin.And a great site about jquery.
Woohoo, been trying to get the background setup like this for ages and just stumbled accross this site,
cheers
This claims to “AND it always stays in the proper aspect ratio”, while anyone can see that it stretches the image, so this is not accurate….does anyone know how to fix this?
it’s work like a charme ! i really need this jQuery plugin a long time ago
I just got this error: and image wont rezise. Js is in place.
$(“#background”).fullBg is not a function
[Break On This Error] $(“#background”).fullBg();
Are you loading up the jquery.fullbg.js file before you have the call to the
.fullBg()function?Many of our clients have started requiring full size image in background. dont know why its being so much popular. thanks for the solution.