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

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?

---

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;
}

---

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.

---

Be aware though. Using $resource{... does not work within a referenced .css file. You need to add a style element.

---

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.

---

So the problem seemed to be that the browser was looking into

http://localhost:8080/<app-name>/assets/images/<background-image-name>

which seems correct but if you inspect other images on the page, they render from the path

http://localhost:8080/<app-name>/assets/background-image-name 

So, just by excluding images in your path-name should fix the issue. However, this is just a work around which I am sure would have a better explaination and a solution. Cheers.