Imagem sobre o layout Primefaces

Front-end
#1

Bom dia Galera

Tenho uma duvida sobre imagem e layout do primefaces, hoje eu utilizo o layout do primefaces para dar “cara” ao meu sistema, e eu gostaria de colocar uma imagem de fundo desse layout, que seria a logo do sistema

 <p:layout id="ll" style="height: 600px; width: 770px">
                <p:layoutUnit position="center" size="100" resizable="true" closable="true" collapsible="true" style="text-align: center">
<h:form>
                            <p:messages id="messages" showDetail="true" autoUpdate="true"/>
                            <h:panelGrid columns="2" id="pn" >
                                <h:outputLabel id="llogin" value="Login:"/>
                                <p:inputText id="ilogin" size="36" maxlength="35" value="#{telaLogin.login}"/>


                                <h:outputLabel id="lsenha" value="Senha:"/>
                                <p:password id="isenha" size="36" maxlength="35" value="#{telaLogin.senha}" feedback="false" />

                            </h:panelGrid>
                            <p:focus for="ilogin"/>
                            <h:commandLink action="#{telaLogin.esqueceuSenha}" style="margin-right:20px; font-size: 9px" ajax="false" >  
                                <h:outputText value="Esqueci minha senha..." />  
                            </h:commandLink>  
                            <br></br>
                            <br></br>
                            <br></br>
                            <p:commandButton value="Logar" action="#{telaLogin.bLogar}"
                                             icon="ui-icon-unlocked"
                                             update="pn"
                                             onclick="index"/>
                        </h:form>
</p:layoutUnit>
            </p:layout>

O meu codigo tem o layout e tem os campos: Login e Senha e um botao para logar, logo eu gostaria que a imagem ficasse por tras disso tudo (como se fizesse realmente parte do layout) e os componentes por cima.
Nao sei se existe alguma forma de fazer isso, posso estar falando alguma basteira, mas se alguem tiver alguma dica/ideia

Obrigado

#2

Pessoal, alguém tem alguma dica/ideia?

Obrigado!

#3

Pessoal, estou realmente precisando disso, se existe alguma forma alguem sabe como??

#4

isso se resolve com css!
só colocar o atibuto background ou background-image na tag body

#5

Tentei colocar o background-image mas nao assume, simplesmente nao acontece nada.

#ll {
                margin: 10px !important; 
                padding: 0px !important; 
                background-color: #ece9d8;
                background-image : url(logo.png);
            }
<p:layout id="ll" style="height: 600px; width: 770px; " >
                <p:layoutUnit id="llunit" position="center" size="100" resizable="true" closable="true" collapsible="true" style="text-align: center; ">

Mas nao fica a imagem nem a cor

Alguma sugestao?

#6

tenta colocar no body

#7

se eu fizer no body aplica, mas nao no layout do primefaces, simplesmente aplica atras do layout, ou seja, nao adianta.

#8

pesquisa na documentação sobre o skinning do componente

#9

Fala garoto!!

Então, se vc tentar adicionar a imagem pelo CSS ela sempre vai aparecer atrás do layout, tive o mesmo problema e resolvi da seguinte formar.
utlizei um h:graphicImage no p:layoutUnit central e utilizei o width e height para que a imagem preenchesse todo o painel central.

<h:graphicImage library="imagens" name="logo.png" width="100%" height="100%" />
#10