Question

在我的布局上，我有3个页面.xhtml：顶部，正文和页脚。这些页面包含在template.xhtml中的<p:playout/> 我尝试在Body.xhtml页面中添加背景图片，但图片并未在所有区域中显示。

如何在页面的所有区域显示图像？

我在这里尝试

的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>

和结果

enter image description here

Answer 1

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

Answer 2

试试这个：

    <style>
        body{
            background-image: url("#{resource['imagens/background.png']}");            
        }
    </style>

试着添加背景图片？

2 个答案: