Ir para o conteúdo

Publicidade

 Estatísticas do Fórum

  • 0 Usuários ativos

    0 membro(s), 0 visitante(s) e 0 membros anônimo(s)

Foto:

Como redimensionar o background?

  • Por favor, faça o login para responder
7 respostas neste tópico

#1 Adriano Batista

Adriano Batista
  • Membros
  • 6 posts

Postado 25 dezembro 2006 - 23:56

Boa noite pessoal, estou com uma pequena duvida sobre background no css.

Eu gostaria que a imagem do background aumentasse ou diminuisse de acordo com o tamanho da celula, ou seja, nao quero que o background tenha um tamanho fixo ou que fique repetindo, gostaria que ele se redimensionasse sozinho.

Pesquisei na net e achei essa linha de comando que faria isso que eu to querendo eu acho:

background-size: 100%;

Porem isso ai nao esta funcionando, alguem tem ideia do que posso fazer?

Ficaria agradecido

[]s
Adriano
  • 0

#2 Adriano Batista

Adriano Batista
  • Membros
  • 6 posts

Postado 26 dezembro 2006 - 12:09

Bom pessoal, nao consegui achar como redimensionar, entao criei uma tabela com um background diferente em cada celula usando css para nao repetir o fundo e repetir somente x ou y.
Para ficar legal acabei criando um iframe tambem.
Mas estou tendo uma pequena dificuldade agora.
O site nao ta abrindo no internet explorer e o menu do lado esquerdo esta ficando com uma parte em branco como podem verificar no link:
http://www.mineirodoido.net/age/
Ali eu coloquei um background na celula debaixo e pedi para ele ficar somente no topo alinhado a esquerda com esse codigo:

background-image: url(fundo1dow.png);
background-repeat: no-repeat;
background-position: left top;

Porem esta centralizado, e nao alinhado la em cima.

Alguem teria uma alternativa ou solução para meu caso? tudo que eu queria era ter um menu parecido com esse e essa imagem sobre o menu, abrindo as paginas do lado direito com as devidas informações.
  • 0

#3 nettotma14

nettotma14
  • Membros
  • 380 posts

Postado 26 dezembro 2006 - 23:25

Pelo que eu saiba o background-sizfaz parte das especificações CSS3..
pouco aceita...
então nem vale arrisca
  • 0

#4 Giovani

Giovani
  • Administradores
  • 7.014 posts

Postado 26 dezembro 2006 - 23:40

Pelo que eu saiba o background-sizfaz parte das especificações CSS3..
pouco aceita...
então nem vale arrisca

É bem nessa mesmo! :natal_noel:
  • 0

#5 void

void

    Consultor

  • Membros
  • 842 posts

Postado 27 dezembro 2006 - 09:24

tem como fazer isso só no IE com filtros!!

mas naum é o caso do forum!!
  • 0

#6 void

void

    Consultor

  • Membros
  • 842 posts

Postado 27 dezembro 2006 - 09:37

com esse código você consegue fazer isso no html todo mas naum vejo como fazer isso numa td ou table sem o uso extremo de javascript acredito q será um trabalho enorme para uma feature que ao meu ver naum é muito essencial!!

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
html{
	height: 100%;
}
body{
	background-color: transparent; 
	margin: 0px; 
	padding: 0px; 
	height: 100%; 
	z-index:0; 
	position:relative;
}
img#bg{
	height: 100%; 
	width: 100%; 
	z-index: -1; 
	position:absolute; 
}
</style>
</head>

<body>
<img src="img.gif" alt="" id="bg" />
teste
</body>
</html>



testei no ff e no ie e funcionou muito bem!!

the void
  • 0

#7 void

void

    Consultor

  • Membros
  • 842 posts

Postado 27 dezembro 2006 - 10:29

olha q interessante no ff vai mas no ie ele c perde por causa do margin da table!! c tirar a margin ai vai!!


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>

window.onload = window.onresize = function(){
	
	var bg = document.getElementById("bg");
	var obj = document.getElementById("essa");
	
	bg.style.display="none";
	
	bg.style.top = (obj.offsetTop+1)+"px";
	bg.style.left = (obj.offsetLeft+1)+"px";
	bg.style.width = obj.clientWidth+"px";
	bg.style.height = obj.clientHeight+"px";
	
	bg.style.display="block";
}

</script>
<style>
html{
	height: 100%;
}
body{
	background-color: transparent; 
	height: 100%; 
	z-index:0; 
	position:relative;
}
img#bg{
	z-index: -1; 
	position:absolute;
	display:none;
}
table{
	margin:30px;
}
</style>
</head>

<body>
<img src="img.gif" alt="" id="bg" />

<table border="3" cellspacing="4" cellpadding="4">
  <tr>
	<td>1</td>
	<td>2</td>
  </tr>
  <tr>
	<td>3</td>
	<td id="essa" width="100" height="100">4</td>
  </tr>
</table>

</body>
</html>

  • 0

#8 Adriano Batista

Adriano Batista
  • Membros
  • 6 posts

Postado 27 dezembro 2006 - 18:49

hum...
vlw pelas respostas, vou procurar é mudar tudinho mesmo, parece que o negocio ta ficando complicado para uma coisa relativamente simples que estou querendo fazer, nao compensa.
A principal intensão era ter um menu parecido com o desse site:
http://www.agecommunity.com/
E ao clicar abrir uma pagina ali do lado.
Mas parece que nao funcionou muito bem :(
De qualquer forma obrigado pelas respostas.
Alguem saberia me indicar um site ou o que mais ou menos eu deveria procurar saber? Tipo o menu parecido eu ja tenho, ali seria um iframe abrindo do lado?
Se for, como fazer para ele acompanhar a barra da janela principal?
Ja estou fungindo muito ne do principal assunto do forum CSS / XML / XHTML
Se alguem puder dar uma orientada
[]s
  • 0