Server Relative references INSIDE CSS?

Question

CssRegistration does a grand job of referencing the CSS file relative to the site URL you are on.

What do you do inside the CSS file? If I'm deploying assets to the /_layouts/images directory, sure /_layouts/images works great on MOST sites. There are, however, the occasional /sites/ as a rootweb, in which case the reference needs to be /sites/_layouts/images.

Is there a good way to do this?

Answer 1

URLs in CSS files are always relative to the CSS file itself. If you have assets to reference that are in the same (or close) location (for example, in Style Library or similar), you can simply use paths relative to the CSS file.

If you are referencing assets from within _layouts or _layouts/images, that's just as easy. These are configured as virtual folders that are available from any site (since it's pointing to the file system, not the content database). So all of these paths are the same:

http://localhost/_layouts/images/logo.png
http://localhost/sites/abc/_layouts/images/logo.png
http://localhost/sites/abc/subsite1/subsite2/_layouts/images/logo.png

In your CSS file, the path is simply: _layouts/images/logo.png

Answer 2

OK. So if you have a directory structure like this:

Folder1/  
Folder1/images/image1.png
Folder1/css/style.css

(This can be inside any folder eg: _layouts, _layouts/1033/Styles etc)

To refer to the image1.png from the style.css, all you have to do in the style.css is:

'../images/image1.png'

The "../" in the start will look for the images directory one level above from the location where the css stylesheet is present. So there is no need to consider the /sites/ issue here as the relative path will always be determined from the location of the style.css file.