I have a few CSS files that I am inluding in velocity file in a Confluecne plugin. The CC file has reference to some images that are bundled in the plugin. How do I reference the context path in CSS file? Or may be I should ask how do you guys avoid having image path referenced in a CSS file.

2 answers

What you need to do is make image as a downloadable resource. And in css you just refer the image file name. Here is section from this page.

Images in subdirectories (optional)
You can put your images into a subdirectory within your theme if you want to:
For example: <!-- Images -->
<resource type="download" name="filename.gif" location="images/filename.gif"/>
Note that when you reference that file in your CSS, you simply use the name and not the path in the location. For this example:
.selector {
background-image: url("filename.gif");
}

I really like this answer. If you want to not have to list out all of the images in your image folder you can use this
{code}
<resource type="download" name="images" location="/images"/>
.selector {
background-image: url("images/filename.gif");
}
{code}