Image exists but does not appear as background

Question

I have this in my CSS file:

body {style.css (line 3)
background:#CDF8FF url(images/final_bg.jpg) no-repeat scroll center top;
clear:both;
font-family:Arial,Helvetica,sans-serif;
margin:0;
padding:0;
}

That images exists, as I can get to it via the browser, but it is never displayed to me! What is wrong?

I use firebug to see if its there, every time I put my mouse over it, firebug just shows a loading icon to indicate its not there.

Thanks to anyone that can clear this confusion.

Btw, I have cleared my cache several times! I am using Firefox on my Fedora Linux box.

Answer 1

It's a relative URL. Should it be /images/final_bg.jpg?

Look at your web server's access log and see what's being requested.

Also, in Firebug, look at the network traffic -- are you seeing the request you expect and a success response (200)

Edit: corrected based on David's comment

Answer 2

Odds are that the specified image doesn't really exist.

A common mistake is to place an HTML document at:

http://example.com/foo.html

with a stylesheet at

http://example.com/css/style.css

referencing an image at

http://example.com/css/images/final_bg.jpg

but actually putting the image at

http://example.com/images/final_bg.jpg

URLs in stylesheets are relative to the stylesheet, not documents which reference that stylesheet.

Move the image, or change the URL (to start with a / in the above example)

Answer 3

try using an absolute path, especially if your css is in an external stylesheet.

url(/images/final_bg.jpg)

If that does not work try adding quotes

url('images/final_bg.jpg')

Hope this helps!

Answer 4

I bet on ../images/final_bg.jpg:

background:#CDF8FF url(../images/final_bg.jpg) no-repeat scroll center top;

Answer 5

you need to put the path inside quotes:

background:#CDF8FF url('images/final_bg.jpg') no-repeat scroll center top;

Answer 6

If you use relative URIs in your stylesheet, you need to make them relative to the URI of the stylesheet.

So if your stylesheet is in /css/style.css, you need to use ../images/final_bg.jpg to reference /images/final_bg.jpg correctly (or you use the absolute URI path /images/final_bg.jpg).