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

Try

../images/outbound-blue.png

You need to tell the browser to go back a directory then look in the immage directory. Currently you have it set up to look for a subdirectory called immage in the directory containing stylesheets.

Answer 2

Typically you would reference a resource in a style sheet as a relative url. The url of your image should be relative to the CSS file's location. So ../images/outbound-blue.png from /appName/css/main.css will be referencing /appName/images/outbound-blue.png

If you are still having issues, You can debug this by using a tool like firebug to inspect the page and verify each step in your style.
Verify that:

• The item that you think is being styled is picking up the styles.
• The image that you are referencing can be accessed both manually, and via firebug.
• The css file that you are loading isn't cached and is actually refreshed by the browser.