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...

proj         


        

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

Answer 2

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.

Answer 3

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.

Answer 4

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

Answer 5

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.