Why does this css not produce a background image?

Question

body{    
background:#fff url('images/testProfile.jpg') no-repeat right top;
}

I assume this code should work so please suggest useful debugging steps...eg how to adjust image properties and position in extreme ways...

Answer 1

Keep in mind that url() in CSS is relative to the stylesheet and not the page. This might be a problem here.

Answer 2

Most likely because the image isn't being found. Look at the images loaded via the dev tools of a good browser (Like Chrome, Safari or Firefox + firebug). You should be able to see images it tried to load along with the server responses for them. If it's a 404, then you have your image path wrong.

And remember that the image urls are always relative to the stylesheet location, not the page itself. So the relative path may be different than you think.

---

Debugging example

This page: http://jsfiddle.net/qUfn9/

With css: body { background: url('foo.png') }

Makes the chrome dev tools say this:

Answer 3

try using an absolute path for the url

body{    
background:#fff url('/images/testProfile.jpg') no-repeat right top;
}