Come si aggiungono immagini di sfondo in un'applicazione JSF utilizzando Richfaces e CSS?

Question

Sto creando un sito Web utilizzando JSF e Richfaces, ma ho bisogno di fare alcune immagini di sfondo sulle etichette del menu a discesa. Ho visto che puoi usare l'attributo style facendo

.rich-ddmenu-label { 

    background-image: url("images/the_image.gif"); 

} 

Ma questo non sembra nemmeno provare a mettere un'immagine ovunque.

posso usare un'immagine utilizzando

<h:graphicImage/> 

non so come mettere il testo su di esso però.

Cosa sto sbagliando? Come inserisco un'immagine di sfondo dietro qualche testo?

Answer 1

Supponendo che l'elemento in questione è sempre un class="rich-ddmenu-label" applicata ad esso, il problema è probabile che il percorso per lo sfondo Immagine.

Il percorso è relativo a dove si trova il CSS. Se è in un file esterno, dovrebbe essere rispetto a quella, ad esempio:

/css/styles.css 
/images/the_image.gif 

CSS dovrebbe essere:

background-image: url("../images/the_image.gif"); 

Se il CSS è in linea sulla pagina HTML, sarà relativo al il percorso attuale. Quindi, se la pagina si trova a http://server/path/to/page, cercherà l'immagine allo http://server/path/to/page/images/the_image.gif, quando probabilmente si intende http://server/images/the_image.gif.

Se non risponde, si prega di postare l'HTML generato.

Answer 2

Stai seguendo l'esempio su Richfaces demo site? vale a dire. utilizzare una sfaccettatura e posizionare l'immagine e testo all'interno di un elemento di inclusione (ad es. un frammento o un div)

<rich:dropDownMenu> 
    <f:facet name="label"> 
     <h:panelGroup> 
      <h:graphicImage value="/images/icons/copy.gif" styleClass="pic"/> 
      <h:outputText value="File"/> 
     </h:panelGroup> 
    </f:facet> 
    <rich:menuItem submitMode="ajax" value="New" 
     action="#{ddmenu.doNew}" icon="/images/icons/create_doc.gif"> 
    </rich:menuItem> 
    ... 
</rich:dropDownMenu> 

Answer 3

Ho appena avuto lo stesso problema con JSF 2.0. Ho dovuto usare un css e la soluzione con il percorso relativo non ha funzionato neanche per me (come Choghere pubblicato).

Nel mio libro ho letto che quando si utilizza Facelets come VDL (View Declaration Language) è possibile utilizzare le espressioni anche in una semplice pagina HTML. Quindi ho avuto l'idea di inserire un EL direttamente nel mio css. Nota: non ho dovuto cambiare il nome del file o altro.

Ecco cosa ho fatto. ma prima il mio filestructure

• /resources/common/overlay.xhtml -> questo include solo il seguente CSS (è un componente composito)
• /resources/common/overlay.css
• /resources/images/logo.png

Ora arriva il CSS

.someclass { 
    background-image:url("#{resource['images:logo.png']}"); 
} 

in questo caso risorsa è un implicita oggetto di JSF 2, immagini è il biblioteca dove JSF dovrebbe apparire (si aspetta JSF tutte le librerie/file sotto le risorse, almeno il predefinito ResourceHandler) e quindi il nome della risorsa.

Per le strutture più profonde sarebbe

#{resource['images/folder:logo.png']} 

Speranza che aiuta;)

Answer 4

La mia struttura di cartelle è la seguente:

web Pagine-> risorse- pagine CSS> css //

pagine web-> risorse-> foto // immagini

web Pagine // xhtml file

provare il seguito:

background-image :url("../pics/logo.gif"); 

.. si muove su un livello di cartella /foto si muove nella directory foto /logo.gif ti dà il file

Spero che questo ti aiuti.

Answer 5

ho avuto questa soluzione: creare un nuovo file css con questo contenuto

body { 
background-image: url(../resources/images/Fondo.GIF); 
} 

questo caricherà il file nello stesso modo in html farebbe. Con questo, sarete in grado di caricare un file di sfondo a livello di corpo (su tutta la pagina). Dopo le protezioni è possibile caricare il file css con questa istruzione nel file jsf:

<h:head> 
    <h:outputStylesheet name="ps-pagolinea.css" library="css" /> 
    <h:outputScript name="corrigePoliza.js" library="scripts"/> 
</h:head>