0

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?

2 Answers 2

3

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

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.