Member Avatar for RisTar

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
  • 110 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by ko ko

Dani AI

Generated

Short summary: reported that the header and the shadow images weren’t tiling in Internet Explorer while the inner grass element tiled correctly. ’s suggestion to add explicit background-position is useful, but the thread misses a few practical diagnostic steps and a reliable cross‑browser fix.

Troubleshooting checklist (quick, verifiable):

  • Confirm the image files actually load by opening each image URL directly in the browser or checking the Network panel in IE’s developer tools. A missing image will of course look like “no repeat.”
  • Inspect the computed styles in IE’s dev tools to see what repeat/position values the browser is actually applying.
  • Verify a standards DOCTYPE is present; quirks mode in older IE can change background handling.
  • Temporarily apply a contrasting background color or remove the inner div to confirm whether the header’s background is simply being covered by a child element or banner image.
  • Check stacking and layout: overlapping children, floats, or lack of “layout” in legacy IE can hide or clip backgrounds.

Practical fixes and notes:

  • Avoid relying on inheritance for background behavior in legacy IE; explicitly set the horizontal repeat and explicit positioning on each element so behavior is consistent across browsers.
  • If supporting IE6/7, use an IE‑only stylesheet (conditional comment) to force explicit values, or apply a layout trigger (legacy “hasLayout” fixes such as zoom in IE) when needed.
  • If PNG alpha/transparency is used and the page targets old IE, ensure a compatible solution is applied for those versions, since transparency fixes can affect rendering.

References for behavior and compatibility are available from the MDN docs on background-repeat and the inherit keyword: background-repeat and inherit.

Member Avatar for ko ko

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.