2

This is my css file registrationStyle.css:

body{ background-image: url("#{resources['images/blue.jpg']}"); }

My JSF page:

<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html"> <h:head> <title>User Registration</title> <h:outputStylesheet library="css" name="registrationStyle.css"/> </h:head> <h:body> This is registration page </h:body> </html>

The project structure:

enter image description here

But it can't display image!

UPDATE

I want to using <h:graphicImage tage:

<h:graphicImage name="images/t1.jpg" library="default"/>

And i tried this:

<h:graphicImage name="t1.jpg" library="images"/>

But it says Unable to find resource default, images/t1.jpg ?

enter image description here

Improve this question
5
  • 3
    You need background-image: url("#{resource['images/blue.jpg']}"); instead. Pay close attention at #{resource[...]}. It is not #{resources[...]}. Commented Feb 15, 2015 at 17:53
  • 1
    @Tiny most of the time you give just comments even if you provide great and helpful answers, I am really wondering why :) Commented Feb 15, 2015 at 18:08
  • Uh! The folder name is not resource. It is resources as it was before. The resource identifier here #{resource[...]} is however, resource. Commented Feb 15, 2015 at 19:00
  • @Tarik : The prime reason is English. I lack English severely as I am not educated. It is really hard to learn a foreign language just by reading and/or writing. Commented Feb 15, 2015 at 19:01
  • @Tiny your english is better than mine, I am sure you can make better answers than many people can do, I already saw your profile and I admire your patience and hardworking, hope you will continue on that way and don't give up Commented Feb 15, 2015 at 19:07

1 Answer 1

Reset to default
2

h:outputStylesheet is for loading CSS files, to include an image file inside your JSF page you should use the h:graphicImage Tag like this:

<h:graphicImage name="blue.jpg" library="images"/>

Update:

In order to load a background Image, the best solution is to follow Tiny's suggestion (within comments) and use:

body{ background-image: url("#{resource['images/blue.jpg']}"); }

See also:

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

1 Comment

@SajjadHTLO you really need to read the stackoverflow.com/questions/11988415/… you will anderstand how to use the JSF resource, just read BalusC's answer