IE Background Disappears

Sorry I’ve been out of the CSS loop a while, I’m trying to get the background on the header to appear and it’s not showing it in IE:

I tried Z-index and removing the very last background, I’m clueless as what to look for or if this is a bug or my mistake.

The header has 3 absolute floats on top of it:

<div id="logo"></div>
<div id="trees"></div>
<div id="nav"></div>
#header {
	margin: 10px auto 0 auto;
	width: 980px;
	height: 234px;
	background: url(../images/header.png) bottom 33px no-repeat;
	border: 1px solid red;
	font: 12px Arial;
	position: relative;

Any advice is appreciated :slight_smile:

Your using a relative url. Try a absolute and include it in double quote marks.

background: url(“/resources/images/header.png”) bottom 33px no-repeat;

A good way to troubleshoot your css is to run the page through validation, e.g.
You will notice that the header css has some wrong syntax for your background property. The validator also links you conveniently to w3c background-property specifications.

The correct syntax is to switch “bottom 33px” to “33px bottom”.

The relative url has nothing to do with the issue.