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

css, grails, resources

Solution

Try adding "../" at the beginning of the URI. For example:

../images/outbound-blue.png

The "../" at the start of the URI tells the browser to go up one level to the parent directory then look in the `images` directory. Currently you have it set up to look for a subdirectory called `images` in the directory containing stylesheets.

Problem

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?

Original source