Background image not found from my css file

Question

My css file location htdoc/anyFolder/css/style.css and image folder file location htdoc/anyFolder/image/search.png. I used background-image rule in css file like background-image: url("/image/search.png"); but i does not find the image. Browser look for http://localhost/image/search.png while it should look for http://localhost/anyFolder/image/search.png. Where is the problem. I tried

background-image: url("../image/search.png");

background-image: url("/../image/search.png");

background-image: url("./../image/search.png");

none of this work. Cannot find where is the problem. Does it depends on where the css file is included.

Answer 1

If your paths are htdoc/anyFolder/css/style.css and htdoc/anyFolder/image/search.png

This should work:

background-image: url("../image/search.png");

This should also work:

background-image: url("/anyFolder/image/search.png");

But you say they didn't. You should check if the names of files and folders are correct and also if you have the base element on HTML, because it could change the path where the browser looks for files.

Answer 2

Does it depends on where is include the css file.

Yes. The path to your images is relative to where your css file is.

Just use:

background-image: url("../anyFolder/image/search.png");