0

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;
	
}
2
Contributors
1
Reply
2
Views
6 Years
Discussion Span
Last Post by ko ko
0

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;
}
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.