1

como faço para colocar uma imagem de background no primefaces. Eu já tentei algumas formas mas nenhuma deu certo. O mais perto de um resultado bom que cheguei foi usando <p:graphicImage/> porém quando eu minimizo um menu ou faço uma pesquisa na tabela a imagem não acompanha o resto do layout. Veja só: inserir a descrição da imagem aqui

Esse é o meu template:

<h:body>

    <p:layout fullPage="true">

        <p:layoutUnit header="Sistema de Auditorias" position="north"
            resizable="false" closable="false" collapsible="false">
            <p:toolbar style="height:39px;">
                <f:facet name="left">
                    <p:outputLabel value="Diego Augusto"
                        style="position: relative;left: 1360px;" />
                    <p:commandButton value="Sair"
                        style="height:28px;width:90px; text-align:center;position: relative;left: 1370px;" />
                </f:facet>
            </p:toolbar>
        </p:layoutUnit>

        <p:layoutUnit header="Desenvolvido por: TI Unimed Norte Pioneiro"
            position="south" resizable="false" closable="false"
            collapsible="false">
        </p:layoutUnit>

        <p:layoutUnit header="Menu Inicial" size="200" position="west"
            resizable="false" closable="false" collapsible="false">
            <h:form>

                <p:panelMenu
                    style="background-image: url('../images/verdeBrasil.png');">
                    <p:submenu label="Arquivo">
                        <p:menuitem value="Página Principal"
                            outcome="/pages/principal.xhtml" />
                        <p:menuitem value="Sobre" />
                        <p:menuitem value="Sair" />
                    </p:submenu>

                    <p:submenu label="Auditorias">
                        <p:menuitem value="Todos Procedimentos"
                            outcome="/pages/solicitacoesGeral.xhtml" />
                    </p:submenu>
                    <p:submenu label="Relatórios"></p:submenu>

                </p:panelMenu>

            </h:form>

        </p:layoutUnit>

        <p:layoutUnit position="east" size="400" header="Sobre a Auditoria"
            style="text-align:center;" resizable="false" closable="false "
            collapsible="true" effect="drop">
        </p:layoutUnit>

        <p:layoutUnit position="center" resizable="false" closable="false"
            collapsible="false">
            <ui:insert name="conteudo" />
            <h:panelGrid>
                <p:graphicImage styleClass="ladoDir.css"
                    style="height: 73px; width: 900px;" url="/images/verdeBrasil.png" />
            </h:panelGrid>

        </p:layoutUnit>
    </p:layout>

Tentei fazer isso: style="background-image: url('../images/verdeBrasil.png');" no começo do <p:panelMenu> mas também não funcionou.

6
  • Não deu erro 404 quando você utilizou esse style? 5/06/2015 às 20:46
  • Não. As vezes ele não aparece. Ou as vezes aparece bem pouquinho só algumas bordas. Acho que é porque ele fica por baixo de tudo. 5/06/2015 às 20:52
  • já tentou colocar no form? 5/06/2015 às 20:53
  • No exemplo de cima quando uso no panelMenu não muda nada 5/06/2015 às 20:53
  • A imagem de cima é feita por um <p:graphicImage> 5/06/2015 às 20:54

1 Resposta 1

4

Como não posso comentar pois ainda não tenho reputação, pelo que eu entendi, você deseja colocar essa imagem de fundo de toda a página, segue a solução, insira no seu h:body:

<h:body style="background: url('../images/verdeBrasil.png') repeat !important;">

Observação: Um ponto importante é que qualquer inserção de CSS que possivelmente venha sobrescrever alguma classe deste tema do primefaces, deve ser incluído o !important ao final do seu css, para assim dizer que o seu é o mais importante a ser usado.



Se não for a solução acima, e seu objetivo é colocar a imagem verde, somente de fundo do panelMenu, seguem três soluções:

O Primefaces, ele possui um tema próprio quando não especificamos um nosso em particular. Esse tema vem com as classes dos componentes que podem ser sobrescritas. Por isso, certas alterações não conseguem ser feitas por alteração inline. Existem algumas maneiras de fazermos isso para chegarmos a solução que você procura.

Segundo o manual, o component panelMenu, tem as seguintes propriedades para se alterar esteticamente:

  • .ui-panelmenu Sobrescrevendo este item, você altera o corpo todo do componente.
  • .ui-panelmenu-header Sobrescrevendo este item, você altera cabeçalho menu.
  • .ui-panelmenu-content Sobrescrevendo este item, você altera rodapé do menu.
  • .ui-panelmenu .ui-menu-list Sobrescrevendo este item, você altera a arvore de conteúdos.
  • .ui-panelmenu .ui-menuitem Sobrescrevendo este item, você altera um menuItem da arvore.


Adicionando CSS á página:

Na sua página, dentro da tag adicione o seguinte código abaixo:

<style type="text/css">
    .ui-panelmenu .ui-menuitem {
        background-image: url('../images/verdeBrasil.png') !important;
    }
</style>

Criando um arquivo css:

Crie um arquivo chamado estilo.css dentro da sua pasta WebContent, inclua o seguinte código:

<style type="text/css">
    .ui-panelmenu .ui-menuitem {
        background-image: url('../images/verdeBrasil.png') !important;
    }
</style>

Assim, dentro da sua página dentro da tag adicione o seguinte código:

<link rel="stylesheet" type="text/css" href="#{request.contextPath}/estilo.css"/>

Criando um tema:

O primefaces, utiliza de seu próprio tema para sobrescrever atributos css utilizados, isto pode ser alterado criando um tema, e adicionando ele ao web.xml do seu projeto, este deve estar contido em um jar, na pasta /WEB_INF/lib/ do seu projeto (pág 541 da documentação) :

<context-param>
    <param-name>primefaces.THEME</param-name>
    <param-value>meuTema</param-value>
</context-param>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .