homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Background color
Background color not showing in google chrome

 3:16 pm on Aug 19, 2011 (gmt 0)


The background color for a website am working on is not showing in Google Chrome. Instead of brown, it's all white. Please help!




 5:15 pm on Aug 19, 2011 (gmt 0)

Perhaps Chrome has run out of brown?!


 6:17 pm on Aug 19, 2011 (gmt 0)

Noooo . . . a brown shortage, what next, no green eggs? :-)

Show us **a snippet** of sample code.



body { background: #401f00; }

Validate [validator.w3.org] the web page. Chrome is particularly troublesome if the page is not in Standards Compliance Mode.


 8:20 pm on Aug 19, 2011 (gmt 0)

Does this happen in all copies of Chrome or just the one on your computer? Almost all browsers have a setting for "always use my colors" (wording variable). Except, apparently, Chrome, which only offers "themes".

How is the color identified in the CSS? The format rocknbil gave (# followed by six hexademicals) should work in all browsers, as should the shorter three-hexadecimal form. There are a few other recognized numerical formats. Named colors are tricky because not all of them are universal. A non-official color name won't validate, even if most browsers recognize it, so check that first.

The official list of Named Colors is here [w3.org]. Ouch, that's shorter than I thought. And the "lime" is lime-er than my eyes care to look at.


 1:02 am on Aug 20, 2011 (gmt 0)

body { background-color: #401f00; }


 4:35 pm on Aug 22, 2011 (gmt 0)

While that will work, the shorthand background: is all that's needed if it's just a color. Example full shorthand statement with images:

background: ( #401f00 url(/images/div-bg) top left repeat-x; }

Which will give a background fill of #401f00 wherever the image doesn't cover (and the color will show while the images are loading.)

Where specific background-image really helps:

#nav-images li a { background-color:#401f00; background-position: top left; background-repeat: repeat-x; }
#nav-images li a:hover { background-position: bottom left; }

#home { background-image: url(/images/home.gif); }
#about { background-image: url(/images/about.gif); }
#contact { background-image: url(/images/contact.gif); }

<ul id="nav-images">
<li><a href="/" id="home">Home</a></li>
<li><a href="/about" id="about">About</a></l
<li><a href="/contact" id="contact">Contact</a></li>

... or similar . . . the one-liner for image assignment is a real timesaver in debugging.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved