How can I embed an CSS background image link with JSF?

Question

Is there a way to create the image url dynamically for an embedded style sheet using JSF?

Example:

<h:head>
  <style type="text/css">
    .someId { background-image:url(images/example.jpg); }
  </style>
</h:head>

(using <h:graphicImage library="images" name="logo.gif" /> is not supported for embedded CSS).

score 1 · Accepted Answer · answered Apr 28 '11 at 10:39

1

If I correctly understood your question:

In my project I've used this style:

<h1
 class="logo"
 style="background:url( #{mainMenuNavigationBean.headerImage} ) no-repeat;">

where mainMenuNavigationBean is a session bean where I set the headerImage based on some conditions.

answered Apr 28 '11 at 10:39

Cristian Boariu

The point is that you can just use EL in template text. But please note that using `style` attribute is considered poor practice. Using `.someId { background-image:url(#{bean.image}); }` should suffice for the OP. – BalusC Apr 28 '11 at 13:00
@BalusC - You are right Balus but if you are using xhtml facelets, so you have different components with ui:composition you will not have the chance to put in the head this embeded css style...am I right? – Cristian Boariu Apr 28 '11 at 13:23
Cristian, if you put it in an tag, it should get included in the head, though i have had trouble understanding what all is allowed there. Better yet, just externalize the css into a separate file and use the approach outlined [here](http://stackoverflow.com/questions/5847473/can-i-use-el-for-external-css-files-with-jsf/6753697#6753697) – Lucas Jul 19 '11 at 21:51

1 Answers1