background image not displaying

Question

can someone please tell me why the background image is not displaying in my php code.

#wrap-iframe{
    background-image: url(bg_01.gif); 
    background-repeat: no-repeat; 
    border:0 none;
    min-width:760px;
    min-height: 700px;
}

this is the CSS i have. the div box is displayed flawlessly. the image url is correct. if i inlcude the image through the tag, it shows up.

i was not this bad at CSS...:-(

Answer 1

Note that the image path must be relative to the stylesheet. If your stylesheet is in a different directory than the page, you must adjust the path in url() accordingly.

You can right click the DIV in Firefox and click "show background image". It will take you to the URL where firefox is looking for the image, and you can see whether it's correct or not.

Answer 2

I recommend using an "absolute" path. Start with a forward slash and describe the path from the HTML root forwards, i.e. /images/bg_01.gif would resolve to http://yourdomain.com/images/bg_01.gif

I always put quotes round the filename too, though they may not be 100% necessary:

background-image: url("/images/bg_01.gif");