Esticar background dupla

[Tylër 0]

Oi, tenho 2 backgrounds numa página... gostaria que toda vez que a div das backgrounds aumentar, as imagens fossem esticadas conforme a div e diminuídas conforme o conteúdo fosse pouco també..

 

 

Estou utilizando assim:

 

<div id="container">
 <img src="images/bg-unico_01.jpg" id="bg1" />
 <img src="images/bg-unico_02.jpg" id="bg2" />
</div>

 

o css:

 

div#container {
   width:1040px; /*height:745px;*/ height:100%; border:solid 1px orange;
}
#bg1 {
   position:absolute; top:0; left:0; z-index:0; width:100%; height:100%;
   background-repeat:no-repeat; background-position:top;
}
#bg2 {
   position:absolute; top:100%; left:0; z-index:0; width:100%; height:100%;
   background-repeat:no-repeat; background-position:bottom;
}

 

Só que a background não fica com height:100%; pra sempre... eu fiz um teste com um menú... add uns 30 ítens e a página não correu para baixo... =/

 

Eu só queria que esta background dupla ampliasse e diminuísse sempre que tivesse quantidades de conteúdo diferentes...

[Thiago Retondar 18]

Tente assim:

 

div#container {
   width: 1040px;
   border: solid 1px orange;
   position: relative;
}

#bg1 { position:absolute; top:0; left:0; z-index:0; width:100%;min-height:100%; height:100%;
       background-repeat:no-repeat; background-position:top;}
#bg2 { position:absolute; top:100%; left:0; z-index:0; width:100%;min-height:100%;  height:100%;
      background-repeat:no-repeat; background-position:bottom;}

Posta uma imagem do resultado final que você deseja... fica mais fácil de encontrar uma solução.

 

:thumbsup: @thiagoretondar

[Tylër 0]

Bom, desta forma, apareceu um scroll para este container,

 

 

 

 

onde só desapareceu se eu setar:

 

div#container {
   width: 1040px;
   border: solid 1px orange;
   position:absolute;
}

 

 

Além do scroll, que tentei sumir com overflow:hidden e nao deu certo, existe alguma outra diferença?

[Thiago Retondar 18]

Cara,

 

só com essas imagens eu não entendi o que quer fazer. Não entendi o porque de duas imagens.

 

:thumbsup: @thiagoretondar

[Tylër 0]

O motivo é dividir pra carregar mais rápido na página.... só isso.... =p