CODEWITHSUNDEEP
cssjsf-2primefaces
mystarrocks
mystarrocks

Reputation: 4088

Reference a PrimeFaces image resource as CSS background image url

A bit new to the JSF and PrimeFaces and here I am, trying to load a resource (an image to be specific) and use it as a button's background, like this:

.greenButton {
    background: url(#{resource['images:ui-bg_gloss-wave_50_6eac2c_500x100.png']});  
}

and <h:outputStyleSheet library="css" name="customStyles.css" />, but it always resolved to:

.greenbutton {
    background: url("") repeat scroll 0 0 rgba(0, 0, 0, 0);
}

in my stylesheet. I did refer to this question: "How to reference JSF image resource as CSS background image url" here and did the same, but looks like it won't work if it was a PrimeFaces resource? Should I do it differently in this case?

The image is located here: /resources/primefaces-start/images/ui-bg_gloss-wave_50_6eac2c_500x100.png and is loaded by the theme.css under /resources/primefaces-start FWIW.

My default theme is the start:

<context-param>
  <param-name>primefaces.THEME</param-name>
  <param-value>start</param-value>
</context-param>

and I'm actually trying to override some of the theme aspects like the button colors in this case.

Here's my folder structure including the customStyles.css file that I'm modifying:

webapp
  - pages
  - resources
    - css
      -customStyles.css

Upvotes: 1

Views: 2048

Answers (1)

BalusC
BalusC

Reputation: 1108632

You're using the library the wrong way. The library can never be like images, css, js, etc in a sensible way. See also the bottom part of the answer on the question you found, which in turn references further to a must-read Q&A for JSF starters What is the JSF resource library for and how should it be used?

Given an image URL of /resources/primefaces-start/images/ui-bg_gloss-wave_50_6eac2c_500x100.png, the library part is clearly primefaces-start.

So, this should do:

.greenButton {
    background: url(#{resource['primefaces-start:images/ui-bg_gloss-wave_50_6eac2c_500x100.png']});  
}

Upvotes: 2

Related Questions