Backgrounds das divs acompanhando o texto
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;
}Discussão (8)
Carregando comentários...