Putting an image as background on primefaces

Question

how do I put a background image in primefaces. I’ve tried some shapes but none worked out. The closest to a good result I arrived was using <p:graphicImage/> but when I minimize a menu or do a table search the image does not follow the rest of the layout. Look at that:

This is my 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>

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

Answer 1

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

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

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

---

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

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

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

• .ui-panelmenu By overwriting this item, you change the whole component body.
• .ui-panelmenu-header Overwriting this item, you change menu header.
• .ui-panelmenu-content Overwriting this item, you change menu footer.
• .ui-panelmenu . ui-menu-list Override this item, you change the content tree.
• .ui-panelmenu . ui-menuitem Override this item, you change a tree menuItem.

Adding CSS to the 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 called.css style inside your folder Webcontent, 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:

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

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