By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,718 Members | 1,220 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,718 IT Pros & Developers. It's quick & easy.

background-color on HTML or BODY?

HaLo2FrEeEk
100+
P: 404
I'm working on a project that has a background image which needs to be repeated on the x-axis. There will be elements which have transparency overlaying the background image as well. Logically, I set the background attribute of the BODY element in my CSS:

Expand|Select|Wrap|Line Numbers
  1. body {
  2.   background: #494949 url(http://example.com/myimge.png) repeat-x;
  3.   }
To my surprise, this worked in IE9, Firefox, Opera, and Safari, but not Chrome. Every other browser performed as expected, but Chrome wouldn't show the background image. So I tried changing the rule to html, body{}, now what was happening was, in Chrome, the background image showed up on the background of the page, but the body element wasn't getting the background image. Every other browser showed an instance of the background image on the HTML element, then another, slightly offset, on the BODY element. In addition, the transparent element wasn't showing through to the backgound image, since the body background had a color of #494949.

Finally, I tried separating the HTML and BODY rules:

Expand|Select|Wrap|Line Numbers
  1. html {
  2.   background: #494949 url(http://example.com/myimage.png) repeat-x;
  3.   }
  4.  
  5. body {
  6.   background-color: transparent;
  7.   }
And that worked in all browsers.

My qustion is, is this normal behavior? I've always applied background images to the BODY element, have I been doing it wrong? Is this a good wa to accomplish what I'm going for? I don't want to hack together my CSS, I want to get this right.
Mar 21 '11 #1
Share this Question
Share on Google+
3 Replies


drhowarddrfine
Expert 5K+
P: 7,435
Your first example worked the same for me in Chrome as it did in FF and IE9.
Mar 21 '11 #2

JKing
Expert 100+
P: 1,206
It should be set on the body. I tried to replicate this issue but to no avail.

Are you still experiencing this?
Mar 22 '11 #3

HaLo2FrEeEk
100+
P: 404
Nah, I got it fixed by setting the image and page background color in the HTML ruleset, and setting the body background color to transparent with a BODY ruleset. I works in all browsers I've tested it in.
Mar 24 '11 #4

Post your reply

Sign in to post your reply or Sign up for a free account.