How to display horizontal and a vertical background images in IE

[Rocky38]

I need a web page to be made with a horizontal image and a vertical image running at the top and left side of the page respectively..

I have used

body {

	background-image: url(../images/header.gif) , url(../images/menu.gif);
	background-repeat: repeat-x, repeat-y;
	font-family: Verdana, san-serif;
	margin: 0px;
	height: 100%;
	width: 100%;
	}

It worked perfectly fine with FF and Chrome. But IE could not display both the images. I m using IE8..


I 'm pasting entire CSS.. Please suggest!!

*
{
	margin: 0em;
	padding: 0em;
}

body {
	background-image: url(../images/header.gif) , url(../images/menu.gif);
	background-repeat: repeat-x, repeat-y;
	font-family: Verdana, san-serif;
	margin: 0px;
	height: 100%;
	width: 100%;
	}
	
#container {
	width: 100%;
	height:100%; 
	}

#header {
	
	border-bottom: 1px solid #ffffff ;
	height: 45px;
	position: relative;
	width: 100%;
	}
#content {
	
	clear: both;
	margin: 0px;
	width: 1259px;
	position: relative;
	}

#menu { 
	
	float: left;
	padding: 15px;
	position: relative;
	text-align: left;
	width: 170px;
	height: 100%;
	}
#data {
	float: left;
	margin: 25px;
	position: relative;
	width: 1000px;
	}

and the html page looks like..

<head>... </head>
<body>
<div id="container">
	<div id="header">< img ..... /></div>
        <div id = "content">
           <div id = "menu">...</div>
           <div id = "data">...</div>
          </div>          
</container>
</body>

[drhowarddrfine]

Multiple background images is a CSS3 property available in every modern browser and isn't available in IE.

[Rocky38]

Multiple background images is a CSS3 property available in every modern browser and isn't available in IE.

So, How can I get to the design that I wanted?

[Niheel]

Break your page up into multiple containers and run different backgrounds for each container, just like you added a background for body tags.