JSF 2.0 introduced it’s own resource handling. One of the disadvantages of this solution is, that referring to an images inside your CSS doesn’t work the common way:
.foo { background-image: url('images/logo.gif'); // doesn't work with JSF 2.x }
You need to use expression language like:
.foo { background-image: url("#{resource['images/logo.gif']}"); }
Now if you are using LESS and don’t want to write this expression over and over again—you need a mixin:
.background-image(@filename) { background-image: e(%("url(#{resource['images:%s']})", @filename)); }