Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal,
Estou querendo que o background da minha div, que é feita com imagens, acompanhe o texto, conforme esse for aumentando. Hoje em dia, estou usando uma imagem só como background, o que não dá certo, quando o texto é maior que ela. Dividi essa imagem em três, o topo e o rodape, que são iguais, e a imagem do centro, que é a "uniao" entre essas duas outra imagens e a que vai se repetir, acompanhando o texto. O problema é que não consegui fazer isso. Como faço a estrutura das divs, para que o texto fique por cima de todas essas tres imagens, ou seja, as tres imagens se tornam um background só, porém aumentando a imagem do meio, quando for necessário? Como faço?
Minha estrutura atual:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xml:lang="pt-br" lang="pt-br" xmlns="http://www.w3.org/1999/xhtml">
<body>
<div id="principal">
<div id="topo">Topo</div>
<div id="bg_topo"></div>
<div id="bg_meio">
</div>
<div id="bg_rodape"></div>
<div id="menu">Menu</div>
<div id="conteudo">
<div class="limpar"></div>
</div>
<div id="rodape">Rodape</div>
</div>
</body>CSS:
body{
margin-top: 0px;
background: url("../imagens/fundo.png");
}
#principal{
margin: 0 auto; /* centraliza o site */
width: 980px; /* valor dentro da area util */
}/teste/
#bg_topo{
background: url("imgs/fundo_branco_topo.png");
width: 988px;
height: 330px;
}
#bg_meio{
background: url("imgs/fundo_branco_meio.png") repeat-y;
width: 988px;
height: 3px;
}
#bg_rodape{
background: url("imgs/fundo_branco_rodape.png");
width: 988px;
height: 330px;
}Infelizmente, não tenho nenhuma imagem pra ilustrar.
Mas o que quero é o seguinte: eu quero que a imagem de fundo da minha div acompanhe meu texto, ou seja, que ela cresça de acordo que o texto aumente. Para isso cortei essa imagem em tres, que serão encaixadas e formarão a imagem em si, uma para o topo, uma para o meio e a ultima para a parte de baixo da imagem, mas não sei como fazer isso, como dividir as divs para que forme uma imagem e cresça junto com o texto. Acho que esse é o único jeito né?
Espero que agora tenha sido mais claro.
Obrigado.
É necessário a imagem. Para cada tipo de imagem existe uma solução. Se for um padrão, pode ser repetido em padrão tile. Se for um degradê, pode ser formado em conjunto com o fundo da página. Se for uma imagem, que deve ser reajustada, pode optar por escala sempre 100% ou media-queryes. Por isso precisamos ver o que você tem em mãos.
Então as imagens podem ser vistas aqui
Eu quero que essas imagens acompanhe os texto que estão sobre elas. A imagem fundo_branco.png, por exemplo, dividi ela em tres partes, uma faixa superior com a curva, a mesma coisa com a parte inferior, e cortei uma fina tira no meio da imagem, aí na hora de montar as divs para que se juntem e forme a imagem original, não consigo.
Obrigado
poste uma imagem do layout final, pois não entendi o efeito que você quer.
O layout final é esse.
Só do jeito que está aí as imagens de fundo estão fixas, ou seja, se o texto aumentar, ele ultrapassa a imagem e fica sem background, ele ultrapassa o limite das imagens de fundo. E eu quero que a imagem acompanhe.
Eu fiz um teste assim:
index.html:
<div id="principal">
<div id="topo">Topo</div>
<div id="conteudo">
<div id="bg_topo"></div>
<div id="bg_meio">
<h3>Cabeçalho</h3>
<p>Aqui entra o texto do box</p>
<h3>Cabeçalho</h3>
<p>Aqui entra o texto do box</p> <h3>Cabeçalho</h3>
<p>Aqui entra o texto do box</p> <h3>Cabeçalho</h3>
<p>Aqui entra o texto do box</p> <h3>Cabeçalho</h3>
<p>Aqui entra o texto do box</p> <h3>Cabeçalho</h3>
<p>Aqui entra o texto do box</p> <h3>Cabeçalho</h3>
<p>Aqui entra o texto do box</p>
</div>
<div id="bg_rodape"></div>
<div id="menu">Menu</div>
</div>
<div id="rodape">Rodape</div>
</div>css:
body{
margin-top: 0px;
background: url("../imgs/fundo.png");
}
#bg_topo{
background: url("../imgs/fundo_branco_topo.png");
width: 989px;
height: 75px;
}
#bg_meio{
background: url("../imgs/fundo_branco_meio.png") repeat-y;
}
#bg_rodape{
background: url("../imgs/fundo_branco_rodape.png");
width: 989px;
height: 75px;
}E o resultado desse teste foi esse
E não ficou legal, pois as imagens não estão juntas, tem um espaço entre as imagens do topo e do rodape.
Jefferson.
Provavelmente isso deve ser o que voce quer fazer :
#bg_meio{
background: url("../imgs/fundo_branco_meio.png") repeat-y;
margin-top:-19px;
}Então, fiz isso e deu certo.
Ficou assim:
body{
margin-top: 0px;
background: url("../imgs/fundo.png");
}
#bg_topo{
background: url("../imgs/fundo_branco_topo.png");
width: 989px;
height: 75px;
}
#bg_meio{
background: url("../imgs/fundo_branco_meio.png") repeat-y;
margin-top: -19px;
}
#bg_rodape{
background: url("../imgs/fundo_branco_rodape.png");
width: 989px;
height: 75px;
margin-top: -16px;
}Agora, isso não é gatilho? É compatível com todos os navegadores?
Depois de entender o que eu realmente queria, vocês acham que é assim mesmo que tenho que fazer? Ou tem outra forma?
Valeu pela ajuda de sempre.
Jefferson.
Do modo que você explicou nao deu pra entender. Posta uma imagem ai pra nós vermos.