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

After trying all of the other solutions here without success, I skeptically tried the solution found in this article, and got it to work.

Essentially, it boils down to removing @charset "utf-8"; from your CSS.

This seems like a poor implementation in DreamWeaver - but it did fix the issue for me, regardless.

Answer 2

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

Source

Answer 3

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

Answer 4

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 restart Chrome.)