试着添加背景图片？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了试着添加背景图片？相关的知识，希望对你有一定的参考价值。
在我的布局上，我有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>
以上是关于试着添加背景图片？的主要内容，如果未能解决你的问题，请参考以下文章