Feb
23
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">
  <!-- Your site content goes here -->
</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.

DownloadDemo
If you liked this, please share it.
If you require help or support, please visit the Support Forum and ask all your questions there. Questions about themes or plugins posted in the comments below will not be answered.

Tags: , , , , , , , , , , , , , , , , , , , , , , , , ,

Short URL: http://bit.ly/bsYxfK

Discussion 31 Comments

  1. piczoom on February 23, 2010 at 7:09 pm

    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.

    Reply
  2. Derleth on February 24, 2010 at 11:45 am

    GRACIAS MI REY ESTUVO LIIIIIINDO :P
    TE AMOOOOOOOOOOOO

    Reply
  3. Jonathan on March 13, 2010 at 4:24 pm

    Hello.

    Can you give a discription on how to make this work in wordpress?

    Thanks, Jonathan

    Reply
    • Dylan on April 9, 2010 at 11:05 am

      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..

    • Jeremy on June 18, 2010 at 5:41 pm

      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.

  4. Imprimante on April 28, 2010 at 12:59 pm

    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/

    Reply
    • c.bavota on April 29, 2010 at 9:03 am

      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.

  5. Felix on May 4, 2010 at 10:04 pm

    Awesome thing. Don’t forget the width: 100%; for #maincontent ;-)

    Reply
  6. mobile software on May 10, 2010 at 9:55 am

    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.

    Reply
  7. LC900 on May 12, 2010 at 5:25 pm

    Nice jQuery plugin. I’ve just downloaded it and it works like a charm.

    Reply
  8. Simon on May 19, 2010 at 6:21 am

    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.

    Reply
    • c.bavota on May 19, 2010 at 9:37 am

      It is really hard to get things to work properly with IE6. I am a firm believer that people need to upgrade.

  9. Brent on June 9, 2010 at 2:33 pm

    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.

    Reply
    • Sander on July 16, 2010 at 6:45 am

      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();
	});
});
    • c.bavota on July 16, 2010 at 10:59 am

      That’s will work perfectly.

  10. Pete on June 23, 2010 at 7:19 am

    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?

    Reply
  11. Daniel on June 29, 2010 at 5:51 pm

    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

    Reply
    • c.bavota on June 29, 2010 at 7:09 pm

      You can mess around with the absolute positioning so that it is anchored wherever you like.

    • Daniel on July 4, 2010 at 8:24 am

      Great, thanks for pointing me in the right direction

  12. Angelo on July 2, 2010 at 6:42 am

    It’s possible to avoid download the background image?

    Reply
  13. Derek on July 2, 2010 at 9:29 pm

    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.

    Reply
  14. Sachin on July 8, 2010 at 6:08 pm

    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?

    Reply
  15. David on July 10, 2010 at 1:35 am

    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.

    Reply
    • Control Alt Elite on August 23, 2010 at 1:50 am

      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.

  16. mark on July 14, 2010 at 12:29 pm

    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

    Reply
  17. Kristian on July 21, 2010 at 2:44 pm

    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

    Reply
    • c.bavota on July 22, 2010 at 9:19 am

      I think the latest versions are making it act a bit funky. I will have to do some testing.

  18. Ed on July 27, 2010 at 9:14 pm

    I tried this plug in and the content in my site was all stretched out.

    Reply
    • c.bavota on July 28, 2010 at 10:54 am

      So I guess the attempt to add it to the theme did not work?

  19. Marien on August 11, 2010 at 11:26 am

    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&gt;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"
			});		
		}
	}
    Reply
  20. ?áocuklar Duymas?n on August 13, 2010 at 1:56 pm

    I tried this plug in and the content in my site was all stretched out.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*


To enter code in the comment box, please place it between <pre lang="php"> </pre> tags. You don't have to convert any characters to their hex/HTML code. Just add your code the way you would to any code editor.