Issue with background color and Google Chrome

Never heard of it. Try:

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

Ok guys, I found a solution, . It's not great but does the trick with no side effects.

The HTML:

<span id="chromeFix"></span> 

(put this below the body tags)

The CSS:

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

What this does to solve the issue:

It forces Chrome to think the page's content is 100% when it's not - this stops the body 'appearing' the size of the content and resolves the missing background bug. This is basically doing what height: 100% does when applied to the body or html but you don't get the side effect of having your backgrounds cut off when scrolling (past 100% page height) like you do with a 100% height on those elements.

I can sleep now =]

I was able to fix this with:

html { height: 100%; }

HTML and body height 100% doesn't work in older IE versions.

You have to move the backgroundproperties from the body element to the html element.
That will fix it crossbrowser.

I am not sure 100%, but try to replace selector with "html, body":

html, body 
{
   background: black;
   color: white;
   font-family: Chaparral Pro, lucida grande, verdana, sans-serif;
}

I would try what Logan and 1mdm suggested, tho tweak the CSS, but I would really wait for a new Chrome version to come out with fixed bugs, before growing white hair.

IMHO the current Chrome version is still alpha version and was released so that it can spread while it is in development. I personally had issues with table widths, my code worked fine in EVERY browser but could not make it work in Chrome.

I'm seen this problem with Chrome too, if I remember correctly if you minimize and then maximize your window it fixes it as well?

Haven't really used Chrome too much since it was released but this is definitely something I blame on Google as the code I was checking it on was air tight.

Everybody has said your code is fine, and you know it works on other browsers without problems. So it's time to drop the science and just try stuff :)

Try putting the background color IN the body tag itself instead of/as-well-as in the CSS. Maybe insist again (redudantly) in Javascript. At some point, Chrome will have to place the background as you want it every time. Might be a timing-interpreting issue...

[Should any of this work, of course, you can toggle it on the server-side so the funny code only shows up in Chrome. And in a few months, when Chrome has changed and the problem disappears... well, worry about that later.]

Oddly enough it doesn't actually happen on every page and it doesn't seem to always work even when refreshed.

My solutions was to add {height: 100%;} as well.

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; }

It must be a WebKit issue as it is in both Safari 4 and Chrome.