homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Problems showing background image
Element without dimensions

5+ Year Member

Msg#: 4326358 posted 12:17 pm on Jun 15, 2011 (gmt 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



5+ Year Member

Msg#: 4326358 posted 2:26 pm on Jun 15, 2011 (gmt 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?


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

Msg#: 4326358 posted 4:39 pm on Jun 15, 2011 (gmt 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+ Year Member

Msg#: 4326358 posted 5:12 pm on Jun 15, 2011 (gmt 0)

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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved