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

It looks like your question is more concerned with the client-side aspects of things, so even though I don't know Primefaces, here's a stab at answering it:

CSS paths are relative to the location of where the CSS rule is declared.

If this is in your HTML (in a <style> block), then disk.png has to be in the same directory as your file.

If this rule is in a separate CSS file, then disk.png should be in the directory where the CSS file is.

If you create a directory images, then the directory will be relative from the CSS too.

Hope this helps?