IE Background Disappears

HTML & CSS
1

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:

http://reallynicetikis.com/main

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:

2

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;

3

A good way to troubleshoot your css is to run the page through validation, e.g.
http://jigsaw.w3.org/css-validator
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.