Welcome to WebmasterWorld Guest from 50.19.53.104

Forum Moderators: not2easy

Message Too Old, No Replies

Problems showing background image

Element without dimensions

     

ktpmm5

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

jennyj

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?

rocknbil

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

/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: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