CSS image paths

Let's say I have a document at http://www.mydomain.com/mydocument.html, which links to the style sheet at http://www.mydomain.com/css/mystyles.css, via the relative path css/mystyles.css.

Let's say I have an image at http://www.mydomain.com/images/myimage.png. The document mystyles.css needs to set myimage.png as the background image of a div element, for the sake of argument.

I have discovered that the browser interprets relative paths within mystyles.css as being relative to mystyles.css. How can I instruct the browser to interpret relative paths in css files as being relative to the document in which they are included?

That would mean that instead of specifying url("../images/myimage.png") in mystyles.css, I would simply specify url("images/myimage.png").

This would be useful because it wouldn't matter where I put mystyles.css, the url would always point to images/myimage.png, relative to the document that links to mystyles.css.

You can only make the paths absolute but domain independent: /images/example.png
The slash at the beginning tells the browser to look at the root directory of your site. This way you can move your stylesheet around on the server as you like. Only if you move the images directory elsewhere in the directory structure you would have to change the paths.

if you have your html files and your css files in the same directory, you could then direct the css to images relative to the html. if the css and html were both in say a folder named 'home' and inside 'home' was an 'images' folder- you could do it that way. In general i havent found the issue that you're referring to to be much of an issue though imo :)