Problems showing background image

Element without dimensions

[ktpmm5]

Pretty basic problem, but it's driving me crazy. I've got a header, followed by a nav menu. I want a background image for my header but it will not display. I do not get errors on my CSS according to WebDeveloper, but the image will not display!

Here is my html:

<div id="header">social change </div>
<div id="nav">
  ......

Here is my css for the header:

  #header {
background:transparent url(../images/header.jpg) no-repeat scroll center;
height: 200px;
}

I've also tried "no-repeat fixed center" for the css - no change

[jennyj]

probably a path issue, image is relative to the html, not to the css file. Can you change it to a root relative path?

[rocknbil]

Did you assign a width and height to the div? Without a height, it won't show. Some ways to debug it:

- Browse in FireFox with FireBug installed. Right-click the element and hover over the background selector on the right. If you get that spinning "loading" graphic and no image preview, it's a path problem as mentioned.

- Add a border to the offending element any time you get in trouble. If you don't have a height, the div will appear as a single solid line.

- When deployed on a sever, do not use toothpick syndrome syntax. You may need to do this locally but when you do this

/images/header.jpg

instead of this

../images/header.jpg

it means "wherever you are, start at domain root and follow this path." So your CSS can be anywhere . . .

/css/mystyle.css

/wp-content/themes/mytheme/css/mystyle.css

and it will always find it if you use a leading slash in image/object/href references.

[ktpmm5]

thanks rocknbil - I did not assign height - soon as I did that, it worked like a charm. thanks for the Firebug tip too -