Hey
I have a problem with background repeating and positioning in IE.
For some reason the background of the header and the shadow underneath it is not repeating but there is another div tag inside of the header div tag and the background is repeating just fine! Help will be much appreciated.
Thanks

link:
http://www.meowgirl.com.au/testing-server/home.php

HTML

<div id="header">
		<div id="grass">
			<img src="images/header_banner.png" alt="Meow Girl - Online Shop Banner" />
		</div>
	</div>
	
	<div id="shadow"></div>

CSS

#header
{
	height: 231px;
	width: 100%;
	background-image: url('../images/header_background.png');
	background-repeat: repeat-x;
	text-align: center;
}

#grass
{
	height: 231px;
	width: 100%;
	background-image: url('../images/header_grass.png');
	background-repeat: inherit;
}

#shadow
{
	height: 13px;
	width: 100%;
	background-image: url('../images/shadow.png');
	background-repeat: inherit;
	
}

Try this:

#header
{
	height: 231px;
	width: 100%;
	background-image: url('../images/header_background.png');
	background-repeat: repeat-x;
        background-position: top left;
	text-align: center;
}

#grass
{
	height: 231px;
	width: 100%;
	background-image: url('../images/header_grass.png');
	background-repeat: inherit;
        background-position: bottom center;
}

#shadow
{
	height: 13px;
	width: 100%;
	background-image: url('../images/shadow.png');
	background-repeat: inherit;
	background-position: top left;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.