Search code examples
cssjsfjsf-2primefaces

Trying add background image?

On my layout, I have 3 pages.xhtml: Top, Body and Footer. These pages are contained at <p:playout/> in template.xhtml I'm trying add a background image in page Body.xhtml, but the image doesn't display in all area.

How can I do display image at all area of page ?

Here how I'm trying

template.xhtml

<p:layout fullPage="true">
            <p:layoutUnit position="north">
                <ui:include src="/template/top.xhtml"/>                
            </p:layoutUnit>

            <p:layoutUnit position="center">
                <ui:include src="/template/body.xhtml"/>                
            </p:layoutUnit>

            <p:layoutUnit position="south">
                <ui:include src="/template/footer.xhtml"/>
            </p:layoutUnit>
        </p:layout>

body.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"> 
    <h:head>
        <title>Facelet Title</title>

        <style>
            body{
                background-image: url("#{resource['imagens/background.png']}");
                width:100%;
                height:100%;
                background-repeat: no-repeat; 
                background-attachment:fixed;            
            }
        </style>

    </h:head>
    <h:body>

  eu sou o body (I'm body)

    </h:body>
</html>

and the result

enter image description here

Solution

  • body { background-image: url("#{resource['imagens/background.png']}"); background-size: cover; background-repeat: no-repeat; background-attachment:fixed;
    }