(Resolvido) Div com imagem de "inicio meio e fim"

[Gabi F.]

Oi, sou nova no forúm, vim aqui tirar uma duvida que tenho a tempos...

Quero fazer uma div 'expansivel', quanto eu mais escreva, mais ela aumente ...

E essa div, vai ter um fundo, então acho que teria que dividir essa imagem do fundo em 3, a parte de cima, o meio e o fim da imagem, ACHO.

Porém não sei qual o codigo para fazer isso, tentei procurar no google, porém não consegui achar nenhuma resposta.

Preciso muito disso, obrigado pela atenção, tchau . :rolleyes:

[*FIT*]

Olá gabi, seja bem vinda ao fórum!

Bom, em relação a uma div "expansivel", basta você determinar o seu tamanho como auto no css.

Agora dividir o background dela em 3 imagens já fica mais complicado, qual seria a finalidade disso?

[Gabi F.]

Olá gabi, seja bem vinda ao fórum!

Bom, em relação a uma div "expansivel", basta você determinar o seu tamanho como auto no css.

Agora dividir o background dela em 3 imagens já fica mais complicado, qual seria a finalidade disso?

Séra que você poderia postar um exemplo, não sou muito experiente em css, séria tipo isso: height: auto; ?

As imagens são porque quero que uma fique no topo e a do meio na verdade que se expandisse entende ?

Espero uma solução ;/

Editado Junho 20, 2010 por Gabi F.

[*FIT*]

Sim, entendi, em relação ao height: auto; está certinho.

Já o que você precisa fazer, fica complicado, porque assim, você consegue trabalhar assim com 3 divs, deixa um topo na de cima, a de baixo fica o rodapé, e só a do meio cresce, porque assim, você não consegue colocar 3 imagens de fundo em uma mesma div.

[Gabi F.]

Sim, entendi, em relação ao height: auto; está certinho.

Já o que você precisa fazer, fica complicado, porque assim, você consegue trabalhar assim com 3 divs, deixa um topo na de cima, a de baixo fica o rodapé, e só a do meio cresce, porque assim, você não consegue colocar 3 imagens de fundo em uma mesma div.

Olha deu até certo, e te agradeço ;D. Porém encontrei outro problema, quero que mesmo sem escrever nada as imagens do plano de fundo aparecam, vou mostrar como está:

<div style="background: url('http://img143.imageshack.us/img143/240/topol.png') no-repeat; width: 800px;"><Center>Conteúdo</center></div>
<div style="background: url('http://img155.imageshack.us/img155/3200/meion.png') no-repeat; width: 800px; height: auto;">
&nbsp;&nbsp;&nbsp;Blablablablabla<BR>
</div>
<div style="background: url('http://img143.imageshack.us/img143/1310/fimi.png') no-repeat; width: 800px;">

Fim !

</div>

Não sei se é possivel ... Obrigado ;)

[*FIT*]

Bom, isso ocorre pois com o tamanho automatico, quando não tiver texto, o tamanho é zero. ma você pode trabalhar com min-height definindo um tamanho minimo.

<div style="background: url('http://img143.imageshack.us/img143/240/topol.png') no-repeat; width: 800px;"><Center>Conteúdo</center></div>
<div style="background: url('http://img155.imageshack.us/img155/3200/meion.png') no-repeat; width: 800px; min-height:300px; height: auto;">
&nbsp;&nbsp;&nbsp;Blablablablabla<BR>
</div>
<div style="background: url('http://img143.imageshack.us/img143/1310/fimi.png') no-repeat; width: 800px;">
</div>

Apenas um exemplo, depois defina o tamanho necessário, em relação ao no-repeat, veja até onde é viavel, pois depois que o tamanho da imagem for preenchido o resto virá em branco.

[Gabi F.]

Consegui! Obrigado :)