Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Jefferson NF

Backgrounds das divs acompanhando o texto

Por , em Desenvolvimento frontend

Recommended Posts

Jefferson NF    0

Jefferson NF
Postado

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;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcos Xavier    189

Marcos Xavier
Postado

Jefferson.

Do modo que você explicou nao deu pra entender. Posta uma imagem ai pra nós vermos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jefferson NF    0

Jefferson NF
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

É 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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jefferson NF    0

Jefferson NF
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

poste uma imagem do layout final, pois não entendi o efeito que você quer.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jefferson NF    0

Jefferson NF
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcos Xavier    189

Marcos Xavier
Postado

Jefferson.

Provavelmente isso deve ser o que voce quer fazer :

 

#bg_meio{
   background: url("../imgs/fundo_branco_meio.png") repeat-y;
   margin-top:-19px; 
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jefferson NF    0

Jefferson NF
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito