Discussion :

[safine]

Bonjour,


Je veux mettre une image au fond d'une page JSF.
Je procède comme suit:
fichier fond.css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
.fond {
background-image: url(fond.jpg);
}

Page xhtml

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<h:head>
<link rel='stylesheet' 
            media='screen' 
            type='text/css' 
            title='Design' 
            href='resources/css/fond.css' />
 </h:head>
</h:head>
<h:body>
 
	<p:layout fullPage="true">
		<p:layoutUnit position="north" styleClass="fond" size="120">
			<center>
				Titre
			</center>
		</p:layoutUnit>

Mais ça ne marche pas, Ou est le problème?

Merci beaucoup en avance.

[cryo94]

Le plus simple est d'utiliser les balises JSF :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
    <h:head>
        <title>titre de la page</title>
        <h:outputStylesheet library="css" name="fond.css" />
    </h:head>

puis dans ton css tu fais référence à ta ressource par le nom de la library :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
background-image: url("#{resource['css:fond.jpg']});

[safine]

Merci Cryo,

J'ai fait cette méthode, et je la refait comme vous m'avez indiqué mais ça n'a pas marché.

[cryo94]

Peux tu donner des informations sur l'organisation de ton projet ?

Version de jsf, arborescence de ton web-inf, si tu utilise Spring , ...

[safine]

J'utilise Jsf 2.0.
Je travaille avec hibernate et primefaces, (il y a pas Spring).
Voici la structure de mon web-content:
Web-Content
-resources
---css
----fond.css
----fond.jpg
-WEB-INF
---faces-config.xml
---lib(dossier des jars)
---web.xml

[ahmedpa]

bon image de font tu peux utiliser la commande background dans la balise body
Bon courage !