Como faço para adicionar imagens de fundo em uma aplicação JSF usando richfaces e CSS?

Question

Eu estou fazendo um site usando JSF e richfaces, mas eu preciso fazer algumas imagens de fundo sobre o drop down rótulos de menu. Eu vi você pode usar o atributo de estilo, fazendo

.rich-ddmenu-label {

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

}

Mas isso não parece mesmo tentar e colocar um em qualquer lugar da imagem.

Eu posso usar uma imagem usando

<h:graphicImage/>

Eu não sei como colocar o texto em cima dela embora.

O que estou fazendo de errado? Como posso inserir uma imagem de fundo por trás algum texto?

Answer 1

Assumindo que o elemento em questão está recebendo um class="rich-ddmenu-label" aplicada a ele, o problema é provavelmente o caminho para a imagem de fundo.

O caminho é relativo ao local onde o CSS está localizado. Se for em um arquivo externo, deve ser relativo ao que, por exemplo:.

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

o CSS deve ser:

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

Se a CSS está em linha na página HTML, será relativo ao caminho atual. Então, se a página está localizado na http://server/path/to/page, ele vai olhar para a imagem em http://server/path/to/page/images/the_image.gif, quando você provavelmente significava http://server/images/the_image.gif.

Se isso não respondê-la, por favor postar o HTML gerado.

Answer 2

Eu apenas tive o mesmo problema com JSF 2.0 . Eu tive que usar um css e a solução com o caminho relativo não funcionou para mim também (como Choghere postou).

No meu livro eu li que quando você usar Facelets como VDL (Ver Declaração Language) é possível usar expressões mesmo em uma página HTML simples . Então eu tive a idéia de colocar um EL diretamente no meu css. Nota:. Eu não tive que mudar o nome do arquivo ou qualquer coisa

Aqui está o que eu fiz. mas primeiro meu filestructure

• /resources/common/overlay.xhtml -> este icludes o seguinte css (É um componente compósito)
• /resources/common/overlay.css
• /resources/images/logo.png

Agora vem a CSS

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

Neste caso, recurso é um objeto implícito do JSF 2, images é o biblioteca , onde JSF deve olhar (jsf espera que todas as bibliotecas / arquivos em recursos, pelo menos a ResourceHandler padrão) e, em seguida, o nome do recurso.

Para estruturas mais profundas que seria

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

Espero que ajude;)

Answer 3

Você está seguindo o exemplo na Richfaces demonstração local ? ie. usar uma faceta e coloque a imagem eo texto dentro de um elemento delimitador (por exemplo. um período ou 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 4

Meu estrutura da pasta é o seguinte:

web páginas-> recursos-> css // páginas css

web páginas-> recursos-> fotos // imagens

páginas da web // xhtml arquivos

Tente o seguinte:

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

.. move-se um nível de pasta / pics move-lo para o diretório fotos /logo.gif dá-lhe o arquivo

Espero que isso ajude.

Answer 5

Eu tenho essa solução: criar um novo arquivo CSS com este conteúdo

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

isso irá carregar o arquivo da mesma maneira html faria. Com isso, você será capaz de carregar um arquivo de fundo a nível do corpo (em toda a página). Depois de enfermarias você pode carregar o arquivo CSS com esta instrução no arquivo jsf:

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