homepage Welcome to WebmasterWorld Guest from 184.73.40.21
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
ktpmm5

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

 

jennyj

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?

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 5+ 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

/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

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