how to change background color in word on one page

This mail service was originally published on Baronial 21, 2009 and is now updated equally it has been entirely revised. Both original methods are removed and now replaced by 4 new methods.

The goal here is a groundwork epitome on a website that covers the entire browser window at all times. Allow'south put some specifics on it:

Fills entire page with image, no white infinite
Scales epitome as needed
Retains paradigm proportions (attribute ratio)
Image is centered on page
Does not cause scrollbars
As cross-browser compatible equally possible
Isn't some fancy shenanigans like Flash

Image higher up credited to this site.

Awesome, Easy, Progressive CSS3 Way

We can do this purely through CSS cheers to the groundwork-size property at present in CSS3. We'll utilize the html element (meliorate than body as information technology's always at least the height of the browser window). We set a fixed and centered background on information technology, then adjust it's size using background-size set to the embrace keyword.

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

Works in:

Safari iii+
Chrome Any+
IE 9+
Opera 10+ (Opera nine.v supported background-size simply not the keywords)
Firefox iii.half-dozen+ (Firefox iv supports non-vendor prefixed version)

View Demo

Update: Thank you to Goltzman in the comments for pointing out an Adobe Developer Connection article which features some code to make IE do comprehend backgrounds likewise:

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

But careful, 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 above IE filters and having bug with scrollbars or dead links or whatever else (similar Pierre above) should try NOT using them on the html or body element. But instead a stock-still position div with 100% width and pinnacle.

CSS-Only Technique #1

Big thanks, as usual, to Doug Neiner for this alternate version. Here nosotros employ an inline <img> element, which will exist able to resize in whatsoever browser. We set a min-elevation which keeps information technology filling the browser window vertically, and fix a 100% width which keeps it filling horizontally. We also set a min-width of the width of the image so that the prototype never gets smaller than it really is.

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

Here is the CSS:

          img.bg {   /* Gear up rules to fill up background */   min-pinnacle: 100%;   min-width: 1024px; 	   /* Fix proportionate scaling */   width: 100%;   height: auto; 	   /* Set positioning */   position: fixed;   top: 0;   left: 0; }  @media screen and (max-width: 1024px) { /* Specific to this particular paradigm */   img.bg {     left: 50%;     margin-left: -512px;   /* l% */   } }

Works in:

Any version of good browsers: Safari / Chrome / Opera / Firefox
IE 6: Borked – simply probably fixable if you lot use some kind of stock-still positioning shim
IE seven/8: Mostly works, doesn't middle at modest sizes only fills screen fine
IE nine: Works

View Demo

CSS-Only Technique #2

1 rather unproblematic way to handle this is to put an inline image on the page, stock-still position it to the upper left, and requite information technology a min-width and min-peak of 100%, preserving it'due south aspect ratio.

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

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

Even so, this doesn't eye the epitome and that'due south a pretty common desire here… So, nosotros can ready that past wrapping the paradigm in a div. That div we'll brand twice as big as the browser window. Then the image will be placed, nevertheless preserving it'due south aspect ratio and covering the visible browser window, and the dead center of that.

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

          #bg {   position: fixed;    height: -50%;    left: -50%;    width: 200%;    height: 200%; } #bg img {   position: absolute;    top: 0;    left: 0;    right: 0;    bottom: 0;    margin: car;    min-width: fifty%;   min-height: fifty%; }

Credit to Corey Worrell for the concept on this one.

Works in:

Safari / Chrome / Firefox (didn't test very far back, simply recent versions are fine)
IE 8+
Opera (whatsoever version) and IE both fail in the same fashion (wrongly positioned, non sure why)
Peter VanWylen wrote in to say that if you add the image via JavaScript, the img needs to have width: auto; and height: auto; to work in IE 8, nine, or x.

View Demo

Update January 2022: Trying to get this to work on Android? JL García wrote to me saying he needed to add together height: 100%; and overflow: hidden; to the html element to get it to piece of work. The full snippet existence:

          html {   groundwork: url(images/bg.jpg) no-repeat center eye fixed;   background-size: encompass;   superlative: 100%;   overflow: hidden; }

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

jQuery Method

This whole idea becomes a lot easier (from a CSS perspective) if nosotros know if the attribute ratio of the image (inline <img> we intend to utilize as a background) is larger or smaller than the current aspect ratio of the browser window. If it is lower, than nosotros can set simply the width to 100% on the epitome and know information technology volition fill both height and width. If it is college, nosotros tin gear up only the peak to 100% and know that information technology volition fill both the top and width.

We have access to this information through JavaScript. Every bit usual effectually here, I like to lean on jQuery.

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

          #bg { position: fixed; height: 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.pinnacle()) < aspectRatio ) { 		    $bg 		    	.removeClass() 		    	.addClass('bgheight'); 		} else { 		    $bg 		    	.removeClass() 		    	.addClass('bgwidth'); 		} 					 	} 	                   			 	theWindow.resize(resizeBg).trigger("resize");  });

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

Works in:

IE7+ (could probably go in IE6 with a fixed position shim)
Most any other desktop browser

View Demo

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

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

          <img id="bg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" style="position: stock-still; left: 0; summit: 0" />

If y'all don't like the gif shim (personally I think it'south OK because it's non "content" it's a groundwork) you could load upwards i of the real images instead. This code volition account for that.

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

          (function() {  var win = $(window);  win.resize(part() {          var win_w = win.width(),         win_h = win.tiptop(),         $bg    = $("#bg");      // Load narrowest groundwork image based on      // viewport width, but never load anything narrower      // that what'south already loaded if anything.     var available = [       1024, 1280, 1366,       1400, 1680, 1920,       2560, 3840, 4860     ];      var electric current = $bg.attr('src').match(/([0-9]+)/) ? RegExp.$ane : null;          if (!current || ((current < win_w) && (electric current < available[available.length - 1]))) {              var chosen = bachelor[available.length - 1];              for (var i=0; i<available.length; i++) {         if (available[i] >= win_w) {           chosen = bachelor[i];           break;         }       }              // Set the new prototype       $bg.attr('src', '/img/bg/' + chosen + '.jpg');              // for testing...       // panel.log('Called background: ' + chosen);            }      // Determine whether width or height should be 100%     if ((win_w / win_h) < ($bg.width() / $bg.height())) {       $bg.css({tiptop: '100%', width: 'auto'});     } else {       $bg.css({width: '100%', top: 'auto'});     }        }).resize();    })(jQuery);

Notation that screen width isn't the only possible good information to have when choosing an epitome size. See this article.

Enjoy

If you apply this, please feel free to leave what technique you used and if y'all altered it in any way in the comments beneath. Ever cool to run across techniques "in the wild."

Download Files

Merely for posterity'south sake, at that place is some other case in hither called table.php which uses an erstwhile technique that used to be a office of this article. It had some cleverness, merely wasn't quite as good as either CSS technique now presented above.