Background desaparece (JSF e Primefaces)

5 respostas
H

Olá, estou com um problema relacionado ao background das páginas de meu sistema.

Eu criei um template facelets chamado layout.xhtml:

<h:body style="background-image: url(themes/css/uel/images/background-novo.jpg) !important">
        <style>
            .ui-widget{
                font-size: 90% !important;
            }
            .ui-layout, .ui-layout-doc, .ui-layout-unit, .ui-layout-wrap, .ui-layout-bd, .ui-layout-hd{

            }
            .ui-layout .ui-layout-unit div.ui-layout-bd, .ui-layout-unit-top {  
                z-index:20 !important;  
                overflow:visible;  
            }
            .ui-widget { font-family: Verdana, tahoma; font-size: 1.0em; }
            .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana, tahoma; font-size: 1em; }

        </style>
        <div align="center">
            <p:layout style="width: 900px;height: 627px;filter:alpha(opacity=20);">

                <p:layoutUnit  style="border: none; margin: 0px; padding: 0px;filter:alpha(opacity=20)" position="top"  height="49" resizable="false"  closable="false" collapsible="false" >
                    <ui:insert name="heading">
                        <ui:include src="default/header.xhtml"/>
                    </ui:insert>
                </p:layoutUnit>

                <p:layoutUnit style="border: none; margin: 0px; padding: 0px;" position="bottom" height="100" resizable="false" closable="false" collapsible="false">
                    <ui:insert name="rodape">
                        <ui:include src="default/footer.xhtml"/>
                    </ui:insert>
                </p:layoutUnit>

                <p:layoutUnit style="border: none; margin: 0px; padding: 0px;"  position="left" width="185" height="540" header="Serviços" resizable="false" closable="false" collapsible="false">
                    <ui:insert name="sidebarLeft">
                        <ui:include src="default/sidebar.xhtml"/>
                    </ui:insert>
                </p:layoutUnit>

                <p:layoutUnit position="center" width="400" height="610">
                    <ui:insert name="content">
                        <ui:include src="default/content.xhtml"/>
                    </ui:insert>
                </p:layoutUnit>
            </p:layout>
        </div>
    </h:body>

No h:body eu setei a imagem de background que quero para todas as páginas. Quando entro na index a imagem aparece corretamente, quando vou para uma segunda página qualquer ele continua lá, porém quando me direciono a uma terceira página o background some.

Como não tenho tanto conhecimento sobre css não tenho muita certeza se esta forma está correta. Alguém poderia me dizer porque isso ocorre?

Mais informações:
JSF 2.0
Primefaces 2.2.1

5 Respostas

E

Verifica se segunda página está no mesmo nível do contexto, ex:

/template.xhtml
/cadastro/segundaPagina.xhtml

se o template acessa o nível da imagem

"themes/css/uel/images/background-novo.jpg"

a segunda página acessa

"./themes/css/uel/images/background-novo.jpg"

Aí vc tem que ajustar seu template para o contexto das páginas que o utilizarão.

. . . bom, mais ou menos isso rs. . .

H

emersonmgc:
Verifica se segunda página está no mesmo nível do contexto, ex:

/template.xhtml
/cadastro/segundaPagina.xhtml

se o template acessa o nível da imagem

"themes/css/uel/images/background-novo.jpg"

a segunda página acessa

"./themes/css/uel/images/background-novo.jpg"

Aí vc tem que ajustar seu template para o contexto das páginas que o utilizarão.

. . . bom, mais ou menos isso rs. . .

Vlw pela resposta.

O meu template está em /private/template/layout.xhtml.
As outras páginas estão em /private/*.xhtml.

Mas não entendi muito bem como que eu deveria referenciar a imagem, até coloquei “./themes” no começo da url, porém ñ adiantou.

E

Pra ficar mais fácil deixa seu template no mesmo nível das páginas,

em

/private/*.xhtml

Ajusta ele pra encontrar a imagem, aí vai dar certo pras páginas também !

H

emersonmgc:
Pra ficar mais fácil deixa seu template no mesmo nível das páginas,

em

/private/*.xhtml

Ajusta ele pra encontrar a imagem, aí vai dar certo pras páginas também !

Então, eu queria manter nessa hierarquia por questão de organização.

Mas felizmente com as suas dicas eu consegui chegar a uma solução, foi só adicionar “#{request.contextPath}/” no começo da URL que o problema de não encontrar mais a imagem foi resolvido.

Vlw emerson.

E

Boa ! :wink:

Criado 29 de setembro de 2011
Ultima resposta 29 de set. de 2011
Respostas 5
Participantes 2