URL's In CSS. How to bind to whatever context is currently deployed?

Question

I have a very large web code base I'm working on, with multiple projects using Spring and a variety of other frameworks. I'm pretty new to web dev, so if there are terms here I'm misusing or if there is clarification you require please let me know.

Currently we're examining how centralize as many icons as possible into one project the

.laf project.

My question is in CSS for other projects, I can reference those img files like this:

.trash {
    background:url(/demo/static/package/name/laf/images/trash.png) no-repeat;
    color:#FFF;
    cursor:pointer;
}

Now that root directoy (/demo) changes depending on where we deploy our project. We don't want to have to change the /demo tag on all image files used in this manner each time we deploy to a different context.

Is there a way in css to reference whatever the deployed context is? Or is this something we need to handle at higher levels?

Answer 1

One way you could do this (if you're using Java) is to use jsp or a servlet to generate your css. If going the jsp route and you're using Spring tags, you could use the <spring:url> tag to generate context-relative URLs.

I'm sure you could do it using PHP / ruby / whatever Microsoft technology in a similar manner.

See here for how to do this in Java.

What you'd basically have is this:

in web.xml:

<servlet-mapping>
  <servlet-name>jsp</servlet-name>
  <url-pattern>*.css</url-pattern>
</servlet-mapping>

in your .css file:

<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<spring:url var="myImage" value="/images/image.png" />

...

.myclass {
    background: url(${myImage});
}

When this gets rendered, it becomes:

.myclass {
     background: url(/context/images/image.png);
}

if your webapp is running in the /context context.