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)

New User

5+ Year Member

joined:Dec 30, 2008
posts: 5
votes: 0

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 June 15, 2011 (gmt 0)

New User

5+ Year Member

joined:July 29, 2009
votes: 0

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 June 15, 2011 (gmt 0)

Senior Member

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

joined:Nov 28, 2004
votes: 0

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 June 15, 2011 (gmt 0)

New User

5+ Year Member

joined:Dec 30, 2008
posts: 5
votes: 0

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

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members