Repetição da imagem de background no cabeçalho

11 de dezembro de 2012 9 respostas

mayronbpr 11 de dezembro de 2012

Boa tarde galera!

Gostaria de colocar uma imagem de fundo que repetisse e preenchesse todo o cabeçalho.
O que há de errado no código e o que fazer para corrigir?

Segue abaixo a página xhtml e o css.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
	<link rel="StyleSheet" type="text/css" href="css/estilos.css"
		media="screen" />
</h:head>

<h:body>
	<center>
		<h:outputText value="" styleClass="cabecalho"
			style="background-image: url(css/azul.jpg) !important" />
		<h:graphicImage url="/css/azul.jpg" />
	</center>
</h:body>
</html>

.cabecalho {
	background-image: url(azul.jpg);
	background-repeat: repeat;
}

Desde já, agradeço a ajuda de todos.

9 Respostas

GeekJava 11 de dez. de 2012

Tente fazer da seguinte maneira:

.cabecalho { background: url(azul.jpg) repeat; }

Existe também repeat-x e repeat-y, faça alguns testes aí!

mayronbpr 11 de dez. de 2012

Cara, tentei com todos os repeat possíveis. Tentei desse modo aí que você sugeriu, também não funcionou. Creio que o erro está no modo como estou chamando a imagem, mas não faço a mínima ideia de como consertar isso.

Enfim, valeu pela ajuda!

GeekJava 11 de dez. de 2012

Tente colocar o nome da imagem entre aspas simples.

mayronbpr 11 de dez. de 2012

Tentei com as aspas. Ainda não funcionou. A imagem aparece beleza, só não repete.

GeekJava 11 de dez. de 2012

Já testou se o seu css não está em conflito com o css setado no “style” do seu html?

mayronbpr 11 de dez. de 2012

Já sim, até dei uma conferida aqui agora e nada também.

Dei uma mexida e ficou assim:

<h:body>
	<center>
		<h:graphicImage url="/css/azul.jpg" style="cabecalho" />
	</center>
</h:body>
</html>

Porém, ainda não consegui.

diogozero 11 de dez. de 2012

Dê uma olhada nesses posts:

http://blogdiogomoreira.wordpress.com/2012/10/10/resource-handlers-no-jsf-2-0/
http://www.packtpub.com/article/jsf-images-css-and-js

mayronbpr 13 de dez. de 2012

Arrumei os diretórios da maneira correta, imagens e css dentro de resources, porém o problema persiste.
Alguma outra dica?

guilherme737 17 de dez. de 2012

Acho q seu problema está no componente em que você esta colocando essa imagem e/ou na maneira como está configurando tente colocar esse imagem em uma

ou pode ser que em outro componente funcione também porém não sei se um outputText ou um graphicImage é o mais apropriado, em todo caso atribua um valor de width=“100%” ou pelo menos maior q a sua imagem pra poder ver o efeito da repetição. Só de colocar o background com uma imagem por padrão ele irá repetir tanto x como y mas se quiser somente um dos dois use repeat-x ou repeat-y.

Criado 11 de dezembro de 2012

Ultima resposta 17 de dez. de 2012

Respostas 9

Participantes 4

9 Respostas

Topicos relacionados