background-color on HTML or BODY?

[HaLo2FrEeEk]

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:

body {
  background: #494949 url(http://example.com/myimge.png) repeat-x;
  }

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:

html {
  background: #494949 url(http://example.com/myimage.png) repeat-x;
  }

body {
  background-color: transparent;
  }

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.

[drhowarddrfine]

Your first example worked the same for me in Chrome as it did in FF and IE9.

[JKing]

It should be set on the body. I tried to replicate this issue but to no avail.

Are you still experiencing this?

[HaLo2FrEeEk]

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.