Accessing images with CSS url() in Primefaces

Question

This is from the Primefaces docs:

Button Icons

An icon on a button is displayed using CSS and image attribute.

<p:commandButton value=”With Icon” image=”disk”/>

<p:commandButton image=”disk”/>

.disk is a simple css class with a background property:

.disk { background-image: url(‘disk.png’) !important; }

My question is: where does this url() point to? In other words, where should I put my images so that the CSS could access it?

I've tried /resources, /resources/img, no luck. Yes, it was working with an absolute URL (one that includes the context path), but that makes the application not portable.

Answer 1

Simple solution:

IF you are using JavaServer Faces 2.0 you have chance to put all resources inside specially designed directory. So you need to have this folder structure in web app:

-rootdir
--resources
---images
----disk.png

And to receive image in css background you should type something like this:

.disk {
background: url(#{resource['images/disk.png']}) !important;
}