Você está na página 1de 2

Se você deseja colocar uma imagem de fundo em 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ê também pode gostar