How To Get More Background Colors On Facebook Post

This mail service was originally published on August 21, 2009 and is now updated as it has been entirely revised. Both original methods are removed and at present replaced by four new methods.

The goal hither is a groundwork paradigm on a website that covers the entire browser window at all times. Permit'southward put some specifics on it:

Fills entire folio with image, no white space
Scales image as needed
Retains paradigm proportions (attribute ratio)
Prototype is centered on page
Does not cause scrollbars
As cross-browser compatible as possible
Isn't some fancy shenanigans similar Wink

Epitome above credited to this site.

Awesome, Like shooting fish in a barrel, Progressive CSS3 Way

We can exercise this purely through CSS thanks to the background-size property now in CSS3. We'll use the html element (ameliorate than torso equally it's ever at to the lowest degree the height of the browser window). We prepare a fixed and centered background on information technology, and so accommodate it's size using background-size ready to the encompass keyword.

          html {    background: url(images/bg.jpg) no-repeat center centre fixed;    -webkit-background-size: cover;   -moz-background-size: cover;   -o-background-size: encompass;   background-size: embrace; }

Works in:

Safari iii+
Chrome Whatsoever+
IE 9+
Opera x+ (Opera 9.five supported background-size but not the keywords)
Firefox 3.6+ (Firefox 4 supports not-vendor prefixed version)

View Demo

Update: Thanks to Goltzman in the comments for pointing out an Adobe Developer Connexion article which features some code to make IE do encompass backgrounds as well:

          filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

Only conscientious, reader Pierre Orsander said they tried this and had some problems with links on the page going dead.

Update: Matt Litherland writes in to say that anyone trying to use the in a higher place IE filters and having problems with scrollbars or expressionless links or any else (like Pierre higher up) should try NOT using them on the html or body chemical element. Just instead a fixed position div with 100% width and elevation.

CSS-Only Technique #ane

Big thanks, as usual, to Doug Neiner for this alternate version. Hither we employ an inline <img> element, which will be able to resize in any browser. Nosotros set a min-pinnacle which keeps information technology filling the browser window vertically, and set a 100% width which keeps it filling horizontally. We also set a min-width of the width of the image and so that the image never gets smaller than it actually is.

The especially clever bit is using a media query to bank check if the browser window is smaller than the image, and using a combo percent-left and negative left margin to keep it centered regardless.

Here is the CSS:

          img.bg {   /* Ready rules to make full groundwork */   min-height: 100%;   min-width: 1024px; 	   /* Set up proportionate scaling */   width: 100%;   height: car; 	   /* Gear up positioning */   position: fixed;   peak: 0;   left: 0; }  @media screen and (max-width: 1024px) { /* Specific to this particular image */   img.bg {     left: fifty%;     margin-left: -512px;   /* 50% */   } }

Works in:

Whatever version of good browsers: Safari / Chrome / Opera / Firefox
IE 6: Borked – but probably fixable if you use some kind of stock-still positioning shim
IE seven/viii: Generally works, doesn't center at small sizes but fills screen fine
IE 9: Works

View Demo

CSS-Simply Technique #ii

One rather simple way to handle this is to put an inline prototype on the folio, stock-still position it to the upper left, and requite it a min-width and min-elevation of 100%, preserving it's attribute ratio.

          <img src="images/bg.jpg" id="bg" alt="">

          #bg {   position: fixed;    top: 0;    left: 0;  	   /* Preserve aspet ratio */   min-width: 100%;   min-top: 100%; }

Still, this doesn't center the image and that's a pretty mutual desire here… So, we can fix that past wrapping the image in a div. That div nosotros'll make twice as large as the browser window. So the epitome will be placed, still preserving it's attribute ratio and covering the visible browser window, and the dead middle of that.

          <div id="bg">   <img src="images/bg.jpg" alt=""> </div>

          #bg {   position: stock-still;    tiptop: -50%;    left: -50%;    width: 200%;    tiptop: 200%; } #bg img {   position: accented;    meridian: 0;    left: 0;    right: 0;    bottom: 0;    margin: motorcar;    min-width: 50%;   min-summit: 50%; }

Credit to Corey Worrell for the concept on this 1.

Works in:

Safari / Chrome / Firefox (didn't exam very far back, but recent versions are fine)
IE 8+
Opera (any version) and IE both fail in the aforementioned way (wrongly positioned, not sure why)
Peter VanWylen wrote in to say that if y'all add together the image via JavaScript, the img needs to have width: auto; and summit: car; to piece of work in IE 8, ix, or ten.

View Demo

Update January 2018: Trying to become this to work on Android? JL García wrote to me saying he needed to add meridian: 100%; and overflow: hidden; to the html element to get information technology to work. The full snippet beingness:

          html {   background: url(images/bg.jpg) no-echo center center fixed;   groundwork-size: embrace;   height: 100%;   overflow: hidden; }

I tested information technology, and it seemed totally correct. Without information technology / With it.

jQuery Method

This whole thought becomes a lot easier (from a CSS perspective) if we know if the attribute ratio of the image (inline <img> nosotros intend to use as a background) is larger or smaller than the current attribute ratio of the browser window. If it is lower, than nosotros tin can set only the width to 100% on the image and know it will fill both pinnacle and width. If it is higher, we can prepare just the height to 100% and know that it will fill up both the height and width.

We have admission to this information through JavaScript. As usual effectually here, I like to lean on jQuery.

          <img src="images/bg.jpg" id="bg" alt="">

          #bg { position: fixed; top: 0; left: 0; } .bgwidth { width: 100%; } .bgheight { height: 100%; }

          $(window).load(function() {      	var theWindow        = $(window), 	    $bg              = $("#bg"), 	    aspectRatio      = $bg.width() / $bg.height(); 	    			    		 	function resizeBg() { 		 		if ( (theWindow.width() / theWindow.top()) < aspectRatio ) { 		    $bg 		    	.removeClass() 		    	.addClass('bgheight'); 		} else { 		    $bg 		    	.removeClass() 		    	.addClass('bgwidth'); 		} 					 	} 	                   			 	theWindow.resize(resizeBg).trigger("resize");  });

This doesn't account for centering, simply y'all could definitely alter this to exercise that. Credits to Koen Haarbosch for the concept behind this idea.

Works in:

IE7+ (could probably arrive IE6 with a stock-still position shim)
Most any other desktop browser

View Demo

Update (June 2012): Reader Craig Manley writes in with a technique to load an accordingly sized background image according to screen. As in, don't load some huge 1900px broad background image for an iPhone.

Showtime, yous'd make images like 1024.jpg, 1280.jpg, 1366.jpg, etc. Then instead of loading an img, yous'd load a shim.

          <img id="bg" src="information:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" style="position: fixed; left: 0; peak: 0" />

If y'all don't like the gif shim (personally I think information technology's OK because it'south non "content" information technology'due south a background) you could load upward one of the real images instead. This code will account for that.

Then you examination the screen width and ready the src of the image based on it. The code beneath does information technology on resize, which you may or may not want. You lot could just run the lawmaking once if you wanted.

          (office() {  var win = $(window);  win.resize(function() {          var win_w = win.width(),         win_h = win.height(),         $bg    = $("#bg");      // Load narrowest background image based on      // viewport width, merely never load annihilation narrower      // that what's already loaded if annihilation.     var available = [       1024, 1280, 1366,       1400, 1680, 1920,       2560, 3840, 4860     ];      var current = $bg.attr('src').match(/([0-9]+)/) ? RegExp.$1 : zilch;          if (!current || ((current < win_w) && (current < bachelor[available.length - 1]))) {              var chosen = bachelor[available.length - 1];              for (var i=0; i<bachelor.length; i++) {         if (available[i] >= win_w) {           called = available[i];           interruption;         }       }              // Set the new image       $bg.attr('src', '/img/bg/' + called + '.jpg');              // for testing...       // console.log('Chosen background: ' + chosen);            }      // Determine whether width or height should be 100%     if ((win_w / win_h) < ($bg.width() / $bg.peak())) {       $bg.css({height: '100%', width: 'motorcar'});     } else {       $bg.css({width: '100%', height: 'motorcar'});     }        }).resize();    })(jQuery);

Note that screen width isn't the only possible good information to have when choosing an image size. Meet this article.

Savour

If you lot utilize this, please experience gratis to go out what technique you used and if you altered it in any manner in the comments below. Ever cool to see techniques "in the wild."

Download Files

Just for posterity'south sake, in that location is some other example in here called table.php which uses an old technique that used to be a part of this commodity. It had some cleverness, just wasn't quite as proficient as either CSS technique now presented above.