Issue with background color and Google Chrome

Question

Sometimes I get a broken background in Chrome. I do not get this error with any other browser.

This is the simple CSS line responsible for the background color of b

Answer 1

IF you're still having trouble, you may try switching 'top' to 'bottom' in chromeFix above, and also a div rather than a span

<div id="chromeFix"></div>

style:

#chromeFix { display: block; position: absolute; width: 1px; height: 100%; bottom: 0px; left: 0px; }

Answer 2

Never heard of it. Try:

html, body {
  width: 100%;
  height: 100%;
  background-color: #000;
  color: #fff;
  font-family: ...;
}

Answer 3

I'm pretty sure this is a bug in Chrome. Most likely it happens if you resize the browser TO full screen, then switch tabs. And sometimes if you just switch tabs/open a new one. Good to hear you found a "fix" though.

Answer 4

I had the same issue on a couple of sites and fixed it by moving the background styling from body to html (which I guess is a variation of the body {} to html, body{} technique already mentioned but shows that you can make do with the style on html only), e.g.

body {
   background-color:#000000;
   background-image:url('images/bg.png');
   background-repeat:repeat-x;
   font-family:Arial,Helvetica,sans-serif;
   font-size:85%;
   color:#cccccc;

}

becomes

html {
   background-color:#000000;
   background-image:url('images/bg.png');
   background-repeat:repeat-x;
}
body {
   font-family:Arial,Helvetica,sans-serif;
   font-size:85%;
   color:#cccccc;
}

This worked in IE6-8, Chrome 4-5, Safari 4, Opera 10 and Firefox 3.x with no obvious nasty side-effects.

Answer 5

I was able to fix this with:

html { height: 100%; }

Answer 6

Simple, correct, solution - define the background image and colour in html, not body. Unless you've defined a specific height (not a percentage) in the body, its height will be assumed to be as tall as required to hold all content. so your background styling should go into html, which is the entire html document, not just the body. Simples.