background images path not working in CSS

Question

Relative path not working in CSS while it's correct

{ width: 64px; background: url(../images/abc/xyz/bottom-navigation.jpg) no-repeat 0 0; }

Firebug giving this error

Folder path

Answer 1

In CSS the path is relative to the stylesheet, so make sure you have that correct. Based on the code you posted, your stylesheet would need to be in a folder (e.g. css) and that folder would be at the same directory level as images.

The alternative and generally better option is to use a path that's relative to your domain. So if the images folder is in the root, you would do use url("/images/abc/xyz/bottom-navigation.jpg") (note, it's good practice to put quotes around filenames in CSS).

The other possibility is that there is some kind of problem loading the image. In Firebug you should be able to right click the URL and open the image. Do this and make sure it loads and is showing the correct path.