Reference a PrimeFaces image resource as CSS background image url

Question

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

@chRyNaN, it's included in the classpath (inside start-1.0.8.jar). — linusv
– linusv, Commented May 2, 2015 at 15:55
Show the full h:outputStylesheet and is start your default theme? — Kukeltje
– Kukeltje, Commented May 2, 2015 at 23:19

Community · Accepted Answer · 2017-05-23 11:44:55Z

2

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']});  
}

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered May 3, 2015 at 7:21

BalusC

1.1m377 gold badges3.7k silver badges3.6k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Reference a PrimeFaces image resource as CSS background image url

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related