fmz 14

Is it possible to have a background image on the html tag and on the body tag?

I have tried but the one on the html tag gets ignored while the one on the body tag works fine.

The page is not posted yet so I can't provide a link.

Here is the code I am using:

html    { background: url(../_images/bg_body.jpg) repeat-x ; }

body { 
background: #fff url(../_images/bg_body_top.jpg) no-repeat 50% 0; 
font-family: Helvetica, Arial, sans-serif; 
font-size: 11px;
color: #000000;


3 answers

This was chosen as the best answer

oh i also wanted to mention putting the #FFF part of your body background style on the html background. if you set the background color to the body it will only cover up whats underneath it (the html), therefore blocking the html background image.

Answered over 9 years ago by Matt Milburn
  • Hi Matt, excellent this is what I needed. That #fff thing is what was covering up the solution I needed. Thanks for the help. fmz over 9 years ago

yes it can definitely be done. a common mistake is forgetting that the body background will always be on top of the html background. i cant see what your background images look like and i dont know what you're trying to make them look like together, so all i can say is try swapping the background images between the body and html and see if that gives you what you are wanting.

what i usually do with my sites is tile (repeat x and y forever) a background to the html element and tile (repeat x only) another background to the body.

Answered over 9 years ago by Matt Milburn
  • I agree, I've testet this just now in Litmus and it works in the following browsers: Explorer 5.0, Explorer 5.5, Explorer 6.0, Explorer 7.0, Explorer 8.0, Firefox 1.0, Firefox 1.5, Firefox 2.0, Firefox 3.0, Firefox 3.5, Opera 10.0, Netscape 9.0, Safari 4.0, Flock 1.2, Flock 2.0, Chrome 2.0, Sea Monkey 1.1, Safari 4.0 OSX, Camino 1.6 OSX, Camino 2.0 OSX, Firefox 3.5 OSX Jens Hedqvist over 9 years ago
Guffa 316

Make sure that you have a proper doctype on the page so that it renders in standards compliant mode. That will make the html tag an element.

In quirks mode the body tag is the main element, and some styles doesn't work on the html element.

Answered over 9 years ago by Guffa
  • Good point. Thanks. fmz over 9 years ago