I have a background image assigned to the body element. It’s 1px in width and I let it repeat horizontally. In IE, Firefox and Opera it looks fine, but when I look at my page in Safari or Chrome, the background doesn’t show up.
Why doesn’t the background show up in Safari and Chrome? And how can I make it show up?
body
{
font-family:verdana, sans-serif;
padding:0;
margin:0;
text-align:center;
background:#fff url(../img/background.gif) repeat-x center top;
}
Hi, we would need to see a site to actually be able to diagnose this :). Just that snippet will work in chrome/sfari.
Even with a simple code like the following one, the background doesn’t show up in Safari and Chrome:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="all" type="text/css" href="css/main.css" />
</head>
<body>
</body>
</html>
body
{
font-family:verdana, sans-serif;
padding:0;
margin:0;
text-align:center;
background:#fff url(../img/achtergrond.gif) repeat-x center top;
}
I have no idea why.
It’s appearing for me 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="all" type="text/css" href="css/main.css" />
<style>
body
{
font-family:verdana, sans-serif;
padding:0;
margin:0;
text-align:center;
background:#fff url(http://www.sitepoint.com/forums/image.php?u=291251&dateline=1264190847) repeat-x
center top;
}
</style>
</head>
<body>
</body>
</html
>
What does the rest of the css look like (if there is any) as a typo above or below could cause issues?
As Ryan said above the code is working for us ok so there must be some other cause.
I got it to work It seems to only work in Chrome and Safari when I use internal CSS within the Head tag. An external CSS won’t work, even when I use a simple code that Ryan is using.
Do you have any stray characters (invisible or otherwise) at the top of the stylesheet? These could kill any styles.
Are you using an @charset rule?
If so is it the first rule in the stylesheet and there must be no spaces or invisible characters above.
Does your stylesheet validate?
Hope that helps to narrow the problem down.
I had @charset “utf-8”; between my code and my copyright text. I moved @charset “utf-8”; to the top of my stylesheet and that fixed the problem 
I never knew @charset could have such an impact 
Since I already have <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” /> in my Head tag, could I remove @charset “utf-8”; from my stylesheets?
Yes you could remove it although the w3c recommend that you always include it.
From my understanding the http headers over-rule all other methods of encoding (but you would of course need to specify something in the page for viewing off-line or from cd etc).
The priority would be:
More reading here
http://www.w3.org/International/tests/results/results-css-encoding-detection
http://articles.sitepoint.com/article/guide-web-character-encoding/2
Tommy (autistic cuckoo) will probably have something to say on this
Try following that link, Paul. (:
I’ll include it then, if it’s required in some cases and to put a smile on w3c’s face
Also look at this thread where I found that it was getting rid of the first rule after the charset in webkit
You mean adding a dummy line like this?:
@charset "utf-8";
/*
-------------------------------------------------------------------------
Copyright (c) 2010 Example. All rights reserved.
http://www.example.com/
-------------------------------------------------------------------------
*/
dummyline{}
body
{
font-family:verdana, sans-serif;
text-align:center;
background:#fff url(../img/background.gif) repeat-x center top;
padding:0;
margin:0;
}
Yes, that fixed it (or it should have) because the charset was ignoring hte first rule after the charset in webkit.
Removing the charset also works
Thanks for the help Ryan & Paul!
You’re welcome :).
What bug are you referring to Ryan? I don’t get a problem at all with Safari.
If you are referring to this bug then it is only evident when you do something invalid
The charset must be the very first thing in the stylesheet and then it will work properly. It is not allowed to be after any characters (visible or invisible) or comments or code.
If it’s badly formed or incorrectly placed then it will produce errors.
Did you go to the thread I linked to?
If you are referring to this bug then it is only evident when you do something invalid
The charset must be the very first thing in the stylesheet and then it will work properly. It is not allowed to be after any characters (visible or invisible) or comments or code.
If it’s badly formed or incorrectly placed then it will produce errors.
Yes, I siad in the thread I linked to that the charset was invalid, I pointed that out to the OP, however I did not know about how to go about best fixing the bug in the other thread, so I gave the OP in this thread and hte last thread the same advice.
I figured it had to be a bug though I did not go looking for the actual bug report.