I have a page, I need to add several background images but even adding an image to the html tag does not seem to work. The images create a burning effect on the bottom and top.
Right now the image attached to the html tag stops where ever the wrapper or container stops, the body does not tile. The body image also does not appear in IE 6.
Here is my code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Trouble Shoot</title>
<style type="text/css" media="all">
html{/*ADD BACKGROUND IMAGE TO BOTTOM*/
background-image: url(utilities/images/bottom-burn-effect.png);
background-position: bottom left;
background-repeat: repeat-x;
}
body{/*ADD BACKGROUND IMAGE TO BODY WHICH TILE REPEAT X,Y*/
margin: 0;
padding: 0;
text-align:left;
list-style-image: url(utilities/images/main-background-tile.png);
background-position: top left;
background-repeat: repeat;
}
#wrapper{/*ADD BACKGROUND IMAGE TO TOP*/
width: 100%;
margin: 0 auto;
padding: 0;
background-image: url(utilities/images/top-burn-effect.png);
background-position: top left;
background-repeat: repeat-x;
}
#container{
width: 950px;
margin: 0 auto;
padding: 0;
}
p{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="container">
<p>This is a test</p>
</div>
</div>
</body>
</html>
There were several things wrong with your original code so I modified it below to allow you to compare both versions. I have added three images that help you see where the backgrounds end up on the page when it renders. In future it would be better to make sure that you have both width and height for your containers or they will contract to the point where you will not see the background effect.