CSS background image load fails when URL is longer

Question

I'd humbly appreciate any help on this one. I have a div with background: url("../images/description_bkgrnd.jpg") repeat; display: none; Later this div is made visible with jQuery. When the url looks like http://localhost/product-name-p35/ all is OK, but when it looks something like http://localhost/product-name-p35/RU/ browser fails to load the image. In firebug I see that it is trying to load http://localhost/product-name-p35/images/description_bkgrnd.jpg, not http://localhost/images/description_bkgrnd.jpg/ what is to blame?

Answer 1

url("../images/description_bkgrnd.jpg")

This is a relative path. When you are in the directory http://localhost/product-name-p35/RU/, it is loading the image from http://localhost/product-name-p35/ (because of the .. )

One possible way to fix this is to reference your image with an absolute path:

url("http://localhost/images/description_bkgrnd.jpg")

Another possible way is to use

url("/images/description_bkgrnd.jpg") 

The / at the beginning makes the browser send the request to the root of the website. But do ensure that the images folder is in the website-root, or modify the URL accordingly.

Reference: http://www.ibdhost.com/help/path/