[Ovillo] Cabecera elástica con imágen de fondo

[Alejandro Roca]

Hola!
 
estoy maquetando web que lleva un diseño elástico. La cabecera contiene el típico logo a la izquierda y un "banner" a la derecha. Éste último tiene una imagen de fondo de un tamaño determinado, el problema es que al ser el div "banner" elástico, el espacio sobrante del mismo keda "vacío", rellenado con el color de fondo. 
 
¿Que mejores opciones hay cuando uno opta por un diseño elástico o líquido y tiene que maquetar un banner con una imagen de unas proporciones y diseño establecidas?
 
 
Muchas Gracias,
 
Saludos
 
 
#wrapper { 
 width: 99em; 
 margin: .5em auto;   
 text-align: left;
}
 
#cabecera {
 margin:0;
 margin-bottom: 1.5em; 
 padding:0;
 height: 16.8em;
 position: relative;
}
 
#cabecera #logo {
 position: absolute; 
 height: 16.8em;
 left:0;  
}
 
#cabecera #logo img { 
 width: 16em;
 height: 16.8em;  
}
 
#banner {  
 margin-left: 17em;     
 height:14.5em; 
 background: url(img/banner.png) no-repeat 0 0; 
 border: .1em solid #777;
 border-bottom: none;
}
 
 
#cabecera .barra { 
 height:2em;
 margin-left:17em;
 line-height: 2em; 
 padding: 0 1em;
 background: url(../img/fondomenusup1.gif) repeat-x left 50%;
 border: 0.1em solid #777; 
 text-align: right;
}
 
#cabecera #banner_bottom {
  margin-bottom: 0em;
 padding-right: ..5em;
}
 
-----------------------------------------------------------
 
....
....
....
 
<div id="wrapper">
 
    <div id="cabecera">
        <div id="logo">
                <a title="Portal web principal de mi empresa" href="www.empresa.com"> <img alt="Logotipo de la empresa"  src="img/logo.gif"></a>
        </div>

        <div id="banner"></div>
 
        <div class="barra" id="banner_bottom">
                ....
        </div>

    </div> <!-- Fin Cabecera -->
 
....
....
....
 
</div> <!-- Fin wrapper -->