I was basically wondering if there was a work around to this? I was redesigning my old mans plumbing website, and took a few of the ideas from this website http://visitmix.c
You should assign the background to the body selector, not the HTML tag:
body
{
background-image: url("../images/html_bg.png");
padding-top: 0px;
margin-top: 0px;
...
}
Assigning it to the HTML selector will not work as the HTML contains the head element as well as the body, and is not generally treated as an object that has a background.
Assigning it to the body selector will ignore the <html>
and <head>
tags and put it right onto the main body of your page, displaying the background as intended.
(If anyone else can explain this better, go ahead!) :)
I know this question has been answered and is older, but I wanted to share my solution in case someone else comes across this. I was having the same problems when I used a background image on my <htm>
tag. The solution was to have the correct DOCTYPE
. Below is the one I used:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
I also added @charset "utf-8";
to the top of my style sheet.
The way I formatted my background
attribute is also different than how you have yours, but I do not know if that makes a difference.
html {
background: url("../images/html_bg.jpg") #000 repeat-x;
}
I was able to have both a <body>
and <html>
background image that worked in Firefox and IE.