Feb
07
2011

Full Size Background Image jQuery Plugin: Redux

by   |  Posted in Downloads  |  117 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.

DownloadDemo

About the author:

A freelance web developer living in Montreal who spends most of his time writing for this site and building Premium themes for WordPress. You can find him on Twitter @bavotasan.

Site5 Affiliate Link
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 117 Comments

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

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

    GRACIAS MI REY ESTUVO LIIIIIINDO :P
    TE AMOOOOOOOOOOOO

  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

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

    • Galajurken on April 24, 2011 at 7:12 am

      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.

  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/

    • 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 ;-)

    • Tour on June 22, 2011 at 12:52 pm

      Thx for the tip, that was just my fault…..it saves me a lot of time to find the error…good work mate

  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.

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

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

  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.

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

    • 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?

  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

    • 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?

  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.

  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?

  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.

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

    • David on November 24, 2010 at 11:07 am

      Thanks, for the tip on the browser website. It will come in useful, I am going to try it out.

    • glasgow photographer on February 13, 2011 at 5:32 am

      Thanks for the browsershots tip, works a treat.

  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

  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

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

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

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

    • Tour on June 22, 2011 at 12:54 pm

      maybe you have forgotten the width 100%

      same problem with me….
      greetz

  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"
			});		
		}
	}
  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.

  21. diseño web on September 3, 2010 at 3:10 pm

    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?

  22. San jose movers on September 7, 2010 at 7:19 am

    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.

  23. Aaron on September 7, 2010 at 12:52 pm

    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.

    • c.bavota on September 8, 2010 at 9:47 am

      Thanks.

  24. Aaron on September 7, 2010 at 2:00 pm

    Also, for anyone who needs this plugin to work for IE6, insert the following after the plugin call:

    <!--[if lte IE 6]&gt;-->

    Works like a charm. :)

    • Nicola on June 29, 2011 at 8:48 am

      Thanks Aaron. That works a charm. Not sure if it’s needed for my site but its better to be safe than sorry.

  25. Aaron on September 7, 2010 at 2:07 pm

    Well, that didn’t work.

    Use an IE conditional comment to target IE6, then call the following script:

     
    • Mauro on November 9, 2010 at 12:49 pm

      Aaron, can’t read the code…

    • Hoteles Benidorm on December 24, 2010 at 11:53 am

      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

    • Flash Developer on April 21, 2011 at 4:42 pm

      I think your code got executed instead of being displayed :-)

Newer Comments →