Menu
i'm in trouble here. I have a JSF application that has a template file called baseTemplate.xhtml. This file is located in /resources/template folder. Follows the file code:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet library="css" name="default.css"/>
<h:outputStylesheet library="css" name="cssLayout.css"/>
<h:outputStylesheet library="css" name="menu.css"/>
<h:outputStylesheet library="css" name="rodape.css"/>
<title>JSF Project</title>
</h:head>
<h:body>
<div id="estrutura">
<div class="top">
<ui:insert name="top">
<ui:include src="somefile"/>
</ui:insert>
</div>
<div id="menu">
<ui:insert name="menu">
<ui:include src="somefile"/>
</ui:insert>
</div>
<div>
<div id="left">
<ui:insert name="left">
</ui:insert>
</div>
<div id="content" class="left_content">
<ui:insert name="content"></ui:insert>
</div>
</div>
<div id="bottom">
<ui:insert name="bottom">
<ui:include src="somefile"/>
</ui:insert>
</div>
</div>
</h:body>
</html>
In my cssLayout.css file, located inside /resources/css folder, i have the following rule:
.top {
position: relative;
height: 120px;
padding: 0;
margin: 0 0 15px 0;
background-image: url('imgSite/sisLogo.png');
background-repeat: no-repeat;
}
The image sisLogo.png is located under /resources/css/imgSite. All pages from my app are inside /pages. When i use the template, he doesn't load the image background for top, but other css properties are loaded. Seems to be a background-image url path problem. How i could solve this?
The project folder structure is as follows:
/
pages/
home.xhtml (using the template)
resources/
css/
cssLayout.css
imgSite/
sisLogo.png
templates/
baseTemplate.xhtml
493
CSS background images are loaded relative to the request URL of the CSS file (and thus not immediately relative to its physical location in the web content). If you explore the generated HTML output of the <h:outputStylesheet>, then you'll see that the request URL has become different. Assuming a context path of /somecontext and a FacesServlet mapping of *.xhtml, it'll look like this:
<link rel="stylesheet" type="text/css" href="/somecontext/javax.faces.resource/cssLayout.css.xhtml?ln=css" />
Note that your (improper btw) usage of the library has moved the /css to ?ln=css. You'd need to fix the background image url() accordingly so that it's properly relative to the real request URL of the CSS. E.g.
background-image: url("../resources/css/imgSite/sisLogo.png");
A more reliable way, which takes JSF resource identifier rules and FacesServlet mapping into account, is to use #{resource} in EL:
background-image: url("#{resource['css:imgSite/sisLogo.png']}");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
