How do I refer to an image resource from CSS in grails?

Question

I want to refer to an image in my main stylesheet for a Grails app and I can't get it to work. My image lives in the standard location in my Grails app...

project\web-app\images\outbound-blue.png

In my stylesheet I want to use it as a background image for a class...

.messageimg {
    height:17px;
    width:16px;
    background-image:url(images/outbound-blue.png);
    background-repeat:no-repeat;
}

This doesn't work for some reason. My stylesheet is in the normal location too, i.e.

project\web-app\css\main.css

I get a missing image marker when I load the page in the browser. I have checked that I have no typos in names etc. I have also tried fiddling around with the virtual path in the url, but I can't figure out what I need to put in there to make this work in Grails.

I don't want to use GSP and insert an IMG tag into my code because I want to control the image through styles.

So, what am I doing wrong?

Answer 1

A more portable way to specify image locations is to use the resource() function:

.messageimg {
    height:17px;
    width:16px;
    background-image:url('${resource(dir: "images", file: "outbound-blue.png")}');
    background-repeat:no-repeat;
}