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

  • 3
    You need `background-image: url("#{resource['images/blue.jpg']}");` instead. Pay close attention at `#{resource[...]}`. It is not `#{resources[...]}`. – Tiny Feb 15 '15 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 :) – Tarik Feb 15 '15 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`. – Tiny Feb 15 '15 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. – Tiny Feb 15 '15 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 – Tarik Feb 15 '15 at 19:07

1 Answers1

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:

Community
  • 1
  • 1
Tarik
  • 4,961
  • 3
  • 36
  • 67
  • @SajjadHTLO you really need to read the http://stackoverflow.com/questions/11988415/what-is-the-jsf-resource-library-for-and-how-should-it-be-used you will anderstand how to use the JSF resource, just read BalusC's answer – Tarik Feb 15 '15 at 18:57