在我的布局上,我有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>
结果
body {
background-image: url("#{resource['imagens/background.png']}");
background-size: cover;
background-repeat: no-repeat;
background-attachment:fixed;
}
试试这个:
<style>
body{
background-image: url("#{resource['imagens/background.png']}");
}
</style>