Problem 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 body:

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

This is exactly how I get this problem. I click a link included in an Gmail's email and I get:

I refresh the page and the background is colored complete.

How do fix this problem?

Answer 1

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

Answer 2

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.

Answer 3

Never heard of it. Try:

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

Answer 4

Have you looked at the gmail link to make sure it's benign as well as tried going there through links on other sites.

Answer 5

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.

Answer 6

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

Answer 7

I was able to fix this with:

html { height: 100%; }

Answer 8

I have the same problem - it appears as tho Chrome renders the page height at the height of the content and not the browser. When resizing Chrome realises its mistake and corrects the height.

Height 100% will appear to work at first but does not solve the issue because if a page is large and need a scroll bar (i.e. bigger than 100%) the 100% style will cause the background to not display when content is scrolled beyond the 100...

Let hope google fix this in the next beta release.

Answer 9

Ok guys I found a solution, its 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 force's chrome to think the pages content is 100% when its 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 have your backgrounds cut off when scrolling (past 100% page height) like you do with a 100% height on those elements.

I can sleep now =]

Answer 10

I have had this happen as well, although only recently. 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 html {height: 100%;} as well.

Answer 11

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 12

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

[PROBLEM SOLVED!! CHECK BELOW!]

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

Answer 13

My Cascading Style Sheet used: body {background-color: #FAF0E6; font-family: arial, sans-serif } It worked in Internet Explorer but failed in Firefox and Chrome. I changed it to: body {background: #FAF0E6; font-family: arial, sans-serif } (i.e. I removed -color) It works in all three browsers. (I had to re-start Chrome.)

Answer 14

Google Chrome and safari needs a tweak for body and background issues. We have use additional identifier as mentioned below.

<style>
body { background:#204960 url(../images/example.gif) repeat-x top; margin:0; padding:0; font-family:Tahoma; font-size:12px; }

#body{ background:#204960 url(../images/example.gif) repeat-x top; margin:0; padding:0; font-family:Tahoma; font-size:12px;}
</style>    
<body id="body">

Use both body and #body identifier and enter same styles in both. Make the body tag with id attribute of body.

This works for me.

Answer 15

When you create CSS style using Dreamweaver for web designing, Dreamweaver adds a default code such as

@charset “utf-8″;

Try removing this from your stylesheet, the background image or colour should display properly

[http://www.thescube.com/chrome-background-colour-image-not-showing/%5D

Answer 16

I'm with Adam and his ChromeFix CSS rules.

I'm surprised more folks don't know about this bug in Chrome.

And it is a bug. The pages validated perfectly and display perfectly in other modern browsers (and even IE as far back as 6 and maybe 5).

As a sometimes user of various Google softwares, we're well used to missing features and developer arrogance. But this as yet unfixed bug was mightily irritating.

There are some really good things about Chrome but there are some real stinkeroos, too.

Answer 17

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

Answer 18

body, html { width: 100%; height: 100%; }

Worked for me :)

Answer 19

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 20

Adam's chromeFix solution with Paul Alexander's pure-CSS modification solved the problem in Chrome, but not in Safari. A couple additional tweaks solved the problem in Safari, too: width: 100% and z-index:-1 (or some other appropriate negative value that puts this element behind all the other elements on the page).

The CSS:

body:after {display:block; position:absolute; width:100%; height:100%; top:0px; left:0px; z-index:-1; content: "";}

Answer 21

This is definitely a WebKit issue. It happens in both Chrome and Safari. I've sent bug reports to Apple about it, but I've yet to get a response or see a fix in an update. Still happening in Safari 5.

Answer 22

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.

Answer 23

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 24

I had the same thing in both Chrome and Safari aka Webkit browsers. I'm suspecting it's not a bug, but the incorrect use of css which 'breaks' the background.

In the Question above, the body background property is set to:

background: black;

Which is fine, but not entirely correct. There's no image background, thus...

background-color: black;

Answer 25

background-color: black; does not solve it either. and to move the color declaration to the html tag is not usefull because you cant use the class attribute in html (i use often a class to distinguish different page types in body, from where it applies on all elements.)

Answer 26

Believe it or not, I tried all soluctions here and none worked.

I was sceptikal but I tried this:

http://www.thescube.com/blog/chrome-background-colour-image-not-showing/

it worked for me. This is the most stupid bug I have ever seen. Or is not a bug but a bad implementation of css from dream weaver?