试着添加背景图片?

问题描述 投票:1回答:2

在我的布局上,我有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>

结果

css jsf jsf-2 primefaces
2个回答
3
投票

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


1
投票

试试这个:

    <style>
        body{
            background-image: url("#{resource['imagens/background.png']}");            
        }
    </style>
© www.soinside.com 2019 - 2024. All rights reserved.