Esticar background dupla

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