Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Problems showing background image

Element without dimensions



12:17 pm on Jun 15, 2011 (gmt 0)

5+ Year Member

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


2:26 pm on Jun 15, 2011 (gmt 0)

5+ Year Member

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


4:39 pm on Jun 15, 2011 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

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


instead of this


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



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


5:12 pm on Jun 15, 2011 (gmt 0)

5+ Year Member

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

Featured Threads

Hot Threads This Week

Hot Threads This Month