0

I tried many ways to include a background image in my jsf page but none of them worked. Althought my page recognizes my stylesheet (because it displays the text red), but doesn't include the image. Should I add a mapping resource in my pom.xml ? Please advise.

This is my folder structure: 

`WebContent
 |-- META-INF
 |-- WEB-INF
 |-- resources
 |    |-- css
 |    |    |-- style.css
 |    |-- images
 |         |-- background.png
 |-- index.xhtml

This is what I added in index.xhtml:

<h:body class="main">
        <h:outputStylesheet library="css" name="index.css"></h:outputStylesheet>
        <p class="test"> some text </p>
</h:body>

And this is my style.css:

.main { 
  background-image: url("#{resource['images:background.png']}");               
}
.test {
    color : red;
}
Kukeltje
  • 12,223
  • 4
  • 24
  • 47
Ana Tayffy
  • 39
  • 2
  • 7
  • 1
    Are you able to reach your resource typing `yourbaseurl/javax.faces.resource/images/background.png`? – Aritz Dec 18 '16 at 18:30
  • Off topic (although not fully): http://stackoverflow.com/questions/11988415/what-is-the-jsf-resource-library-for-and-how-should-it-be-used – Kukeltje Dec 19 '16 at 07:26

1 Answers1

1

Solved !!

The problem was that I put class attribute instead of styleClass to body tag, that is actually a h:body tag. Thank you all for quick answers :)

Ana Tayffy
  • 39
  • 2
  • 7
  • I should have caught that error, but using a browser developer tool so should you ;-). Good it works – Kukeltje Dec 19 '16 at 14:17