Internet Explorer doesn't recognise the 'html' css background image tag?
Question
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.com/ where they used the body css tag as the header background with a few overlapping designs into the main website body - and the html css tag for the background repeating image of the rest of the webpage. While this works in firefox and chrome, the internet explorer background is just the background color.
The website I'm working on is here: http://www.plumberkendal.co.uk which shows what I mean. I've tried numerous things with the width and the height of the html css tag but to no avail.. heres the css in question:
html
{
background-image: url("../images/html_bg.png");
background-repeat: repeat;
background-color: #5a84c5;
height: auto;
width: auto;
}
body
{
padding-top: 0px;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
background-image: url("../images/header_bg.png");
background-repeat: no-repeat;
background-position: center top;
text-align: center;
}
Any help would be greatly appreciated, cross-browser compatibility with css is an area that really confuses me!
2 answers
solution1
4 ACCPTED 2010-11-08 09:53:14
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!) :)
solution2
0 2011-07-26 17:32:45
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.