CSS background image URL failing to load

Question

I'm trying to use background image in CSS but even though I gave the full path of the image, it doesn't work. Firebug shows "Failed to load given URL". I'm sure that there is no permission problem in that folder. My CSS class is

body {
background: url("H:/media/css/static/img/sprites/buttons-v3-10.png") repeat-x scroll left -800px #DCDCDC;
color: black;
font: 13px/1.2em arial,helvetica,clean,sans-serif;
height: 100%;
position: relative;
}

What could be causing the issue?

Answer 1

You are using a local path. Is that really what you want? If it is, you need to use the file:/// prefix:

file:///H:/media/css/static/img/sprites/buttons-v3-10.png

obviously, this will work only on your local computer.

Also, in many modern browsers, this works only if the page itself is also on a local file path. Addressing local files from remote (http://, https://) pages has been widely disabled due to security reasons.

Answer 2

I know this is really old, but I'm posting my solution anyways since google finds this thread.

background-image: url('./imagefolder/image.jpg');

That is what I do. Two dots means drill back one directory closer to root ".." while one "." should mean start where you are at as if it were root. I was having similar issues but adding that fixed it for me. You can even leave the "." in it when uploading to your host because it should work fine so long as your directory setup is exactly the same.