css + alturas + web infernal

[riwel]

Hola a todos:

Quería preguntaros algo sobre css y no se si es que lo que pretendo no se puede hacer o ya ando super liada con este tema.

Quiero hacer una web que ocupara toda la pantalla pero sin ponerle un tamaño fijo, que ocupara el tamaño sea cual fuera, mi problema es que si pongo las imágenes con tamaño fijo, cuándo empequeñezco el navegador y llega al punto de que se junta, se superponen unas con otras y deberia de ir desapareciendo una por un lateral, no se si me explico.

Mi código es este:

Código HTML:

<div id="fondo">
  <div id="dersup">&nbsp;</div>
  <div id="cabecera">
   <a href="#" id="logo"><img src="images/logo.png" alt="logo"/></a>
   <img src="images/vacio.jpg" alt="imagen vacia" id="vacia" />
   <img src="images/imagen" id="imagen" />www.giralda2.tv Otra manera de hacer televisión es posible
  </div>

  <div id="inferior">&nbsp;</div>
  <div id="derinf">&nbsp;</div>
</div> 

y el css

Código HTML:

#fondo {background: url(images/fondoIS.jpg) no-repeat 0 0;
  position:absolute; top: 0px; left: 0px;
  height:100%;
  width:100%
}

#dersup {background: url(images/fondoDS.jpg) no-repeat 0 0;
  position:absolute; top: 0px; right: 0px;
  width:13px;
  height:100%;
}

#inferior {background: url(images/fondoII.jpg) no-repeat 0 0;
  position:absolute; bottom: 0px; left: 0px;
  z-index: 5;
  width:100%;
  height:73px;
}

#derinf {background: url(images/fondoDI.jpg) no-repeat 0 0;
  position:absolute; bottom: 0px; right: 0px;
  z-index: 10;
  width:13px;
  height:13px;
}



#cabecera {
 background: url(images/logoG2tv.jpg) no-repeat 0 0;
 padding:13px;
 margin-left:13px;
 height:116px;
}

#logo {



}

#imagen{

 float:right;
/*
 position:absolute;
 top:13px;
 right: 13px;
 z-index:0;
*/
 width: 448px;
 height: 105px;
 text-indent:-9999px;
}
#vacia{
  position:absolute; 
  top: 13px;
 left:463px;
  width:241px;
  height:105px;

}