Placing an image as a background in the firstfaces

Question

Placing an image as a background in the firstfaces

Navigation

#1 by (2 votes)

0

How do I put a background image in primefaces . I've tried some shapes but none worked. The closest to a good result I got was using <p:graphicImage/> however when I minimize a menu or do a search in the table the image does not accompany the rest of the layout. See also:

Thisismytemplate:

<h:body><p:layoutfullPage="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>

I tried to do this: style="background-image: url('../images/verdeBrasil.png');" at the beginning of <p:panelMenu> but did not work either.

java css jsf primefaces

asked by anonymous 05.06.2015 / 22:43

1 answer

Doubt about the use of 'for' in voting system How to use table in Banner JQuery?

score 2 · Accepted Answer

As I can not comment because I still do not have a reputation, so I understand, you want to put this background image of the entire page, follow the solution, insert it in your h: body :

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

Note: An important point is that any CSS insertion that possibly override some class of this theme of the primefaces, ! important should be included at the end of your css, so to say that yours is the most important thing to use.

If it is not the above solution, and your goal is to put the green, background-only image of the panelMenu, follow three solutions:

The Primefaces, it has a theme of its own when we do not specify a particular one of ours. This theme comes with classes of components that can be overwritten. Therefore, certain changes can not be made by inline change. There are a few ways we can do this to get the solution you are looking for.

According to the manual , the component panelMenu has the following properties to change aesthetically:

.ui-panelmenu Overwriting this item changes the entire body of the component.
.ui-panelmenu-header Overwriting this item, you change the header menu.
.ui-panelmenu-content Overriding this item changes the menu's footer.
.ui-panelmenu .ui-menu-list Overwriting this item changes the content tree.
.ui-panelmenu .ui-menuitem Overriding this item, you change a menuItem of the tree.

Adding CSS to page:

On your page, inside the tag add the following code below:

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

Creating a css file:

Create a file named style.css inside your WebContent folder, include the following code:

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

So, inside your page inside the tag add the following code:

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

Creating a theme:

Firstfaces, uses its own theme to override css attributes used, this can be changed by creating a theme, and adding it to web.xml of your project, it must be contained in a jar , in the / WEB_INF / lib / folder of your project ( page 541 of documentation ):

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