[PROBLEMA EM CSS] Imagens das divs não aparecem

Assuntos Gerais
#1

Muitas pessoas têm esse problema, mas a maioria das vezes é erro banal. Normalmente só de bater o olho já da pra ver o erro.

Diferente daqui ¬¬ estou com uma página web, css externo lincado e não consigo fazer as imagens das divs aparecerem. O link está correto, pois coloco borda e elas aparecem

creio que o problema está no caminho das imagens … que nao estou acertando…

códigos

<html>

	<head>
	
		<title>Index</title>
		
		<link rel="stylesheet" type="text/css" href="css/estiloIndex.css" />
	
	</head>
	
	<body>
	
		<center>
		
			<div id="all">
			
				<div id="headerLeft"></div>
				<div id="headerRight"></div>
				
				<div id="space"></div>
				
				<div id="conteudo"><br><br><br>
				
					<form action="index.jsp" method="post">
					
						<input type="hidden" name="isset" value="ok">
					
						Login: <input type="text" name="login" class="typeText" size="23"><br><br>
						
						Password: <input type="password" name="senha" class="typeText" size="20"><br><br><br>
						
						<input type="submit" value="               Login               " class="botao"><br><br><br><br>
					
					</form>
				
				</div>
				
				<div id="space"></div>
				
				<div id="footer"></div>
			
			</div>
		
		</center>
	
	</body>

</html>

css

body{

	color: #ba4a4a;
	font-size: small;	
}

#all{

	width: 100%;
	background: white;	
}

#headerLeft{

	height: 100px;
	width: 30px;
	border: solid 1px;
	background-image: url("WebContent/images/headerLeft.jpg");
	background-repeat: no-repeat;
	float: left;	
}

#headerRight{

	height: 100px;
	width: 30px;
	border: solid 1px;
	background-image: url("images/headerRight.jpg");
	background-repeat: no-repeat;
	float: right;	
}

#space{

	clear: both;	
}

#conteudo{

	width: 100%;
	background: white;		
}

#footer{

	height: 50px;
	width: 100%;
	border: solid 1px;
	background-image: url("images/footer.jpg");	
	background-repeat: repeat-x;
}

/*---------------------------------------------------------------------------------------*/

.typeText{

	height: 25px;	
}

.botao{

	color: white;
	background: #ba4a4a;
	border: solid 1px;
	border-color: black;	
}

tenho uma pasta chamada WebContent, nela tenho uma pasta chamada css (onde está o css), uma pasta chamada images(onde estão as imagens) e o index.jsp

#2

Eastou fazendo pelo IDE Eclipse … tenho a opção de clicar na imagem num menu lateral e arrastar para o local que eu quero que apareça o caminho dela, mas mesmo assim, não aparece.

Uso o server TomCat7.0 isso pode alterar alguma coisa??? (as imagens são jpg e têm 30x100, exatamente o tamanho das divs)

#3

experimenta colocar a extensao .jpeg em vez de .jpg. Se nao me engano uma vez tive o mesmo problema e acho q era soh isso.

#4

Nada … renomeei as imagens numa segunda tentativa … nada de nada

#5

Olá amigo.

Tente colocar aspas simples ao invés de aspas duplas.
Ou tente colocar somente background e colocar uma cor caso não apareça a imagem, coloque para não repetir.

#6

Olá,

Se você tem uma pasta /css e uma pasta /images dentro da WebContent, então você precisa ‘voltar’ um nível a partir do css para ter acesso as images…

Ficaria assim:

background-image: url("../images/headerRight.jpg");
#7

[quote=jamirdeajr]Olá,

Se você tem uma pasta /css e uma pasta /images dentro da WebContent, então você precisa ‘voltar’ um nível a partir do css para ter acesso as images…

Ficaria assim:

background-image: url("../images/headerRight.jpg");

[/quote]

OMG thanks thanks thanks uso linux, devia ter pensado em voltar com …/ semelhante ao cd …

obrigado obrigado a todos … erro no caminho mesmo !! Deu certo =)

#8

[quote=jamirdeajr]Olá,

Se você tem uma pasta /css e uma pasta /images dentro da WebContent, então você precisa ‘voltar’ um nível a partir do css para ter acesso as images…

Ficaria assim:

background-image: url("../images/headerRight.jpg");

[/quote]

Valeu! No meu código estava apresentando o mesmo erro, fiz o procedimento acima e funcionou certinho!