Imagem de fundo em css com JSF não carrega

Programação Java
#1

Não estou conseguindo inserir uma imagem no background-image, provavelmente é o diretório na url que deve está errado. Alguém pode dar uma força ?

estilo.css

ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
ul a {
	/*border: 1px solid red;*/
	width: 200px;
	height: 40px;
	display: block;
	color: #000;
	text-decoration: none;
	text-indent: 40px;
	line-height: 40px;
	background-image: url("#{resources['imagens/menu.png']}") no-repeat left  bottom;
}

a:hover {
	background-position: right bottom;
	color: #fff;

}

XHTML

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Insert title here</title>
	<h:outputStylesheet library="css" name="estilo.css"></h:outputStylesheet>
</h:head>
<h:body>

	<ul>
		<li><a href="">Home</a></li>
		<li><a href="">Sobre</a></li>
		<li><a href="">Usuário</a></li>
		<li><a href="">Veículo Esportivo</a></li>
		<li><a href="">Veículo de Passeio</a></li>
	</ul>
</h:body>
</html>

Diretórios

guj
guj399×540 25.7 KB

#2

Com a tela renderizada, ao inspecionar, vc consegue ver qual caminho foi renderizado nessa parte?

background-image: url("#{resources['imagens/menu.png']}") no-repeat left  bottom;

o jsf deve fazer alguma substituição nessa parte que começa com #.

#3

Ao inspecionar, percebi que ele mostra um erro na parte do background-image. Já tentei fazer alguns testes mudando o caminho, porém, sem sucesso.

Guj

#4

Entendi. O problema é que o CSS está fora da página XHTML, com isso o JSF não vai conseguir fazer a substituição onde está o #{...}.

Talvez se vc colocar assim funcione:

url("/resources/imagens/menu.png")