0

I am trying to load the css and js files as well as the image in the img directory from mainStyle.css but without secuss. I can not load the js file and the obama.jpg from the css stylesheet.

I am facing a problem to explain why am I getting Hell World! Say apple! green? I have set them before green but now they have the red value, despite that I am getting them rendered in green!!.

index.xhtml

<!DOCTYPE html>
<html xmlns="htpp://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
    <title>External resources</title>
    <h:outputStylesheet library="css" name="mainStlye.css" />
    <h:outputScript library="js" name="mainJS.js" /> 
</h:head>

<h:body>
    <h1>Using external resources</h1>

        <div class="message">Hello World!</div>

        <div class="message">Say apple!</div>

</h:body>
</html>

mainStyle.css

body{
    background: url("#{resource['img/obama.jpg']}");
}

.message{
    color:red;

}

mainJS.js

alert('Javascript works fine');

enter image description here

TheBook
  • 1,698
  • 1
  • 16
  • 32
  • have a look on : http://stackoverflow.com/a/11988418/1460591 – Youans Jun 28 '16 at 16:38
  • 1
    Open the page in a real browser and see what's being loaded. The green colour text means something else going on with your project (it can't be achieved only with the files you posted). – Aritz Jun 28 '16 at 20:21
  • @XtremeBiker: Oh thanks it works in the real browser!! The text is red but the image is not being loaded? – TheBook Jun 28 '16 at 22:53

1 Answers1

0

Just use the relative path of the image in the css. Furthermore, you wrote background instead of background-image.

Have a look here: Can I use EL for external CSS files with JSF?

In your case, would be:

body{
   background-image: url(../img/obama.jpg);
}
Community
  • 1
  • 1
bauz
  • 125
  • 1
  • 12