ajustar imagen a pantalla

[yayita84]

Hola a todos, tengo tres imagenes que debo poner de fondo en el panel superior , pero no se me ajustan a la resolución de la pantalla este es el codigo que tengo en el masterpage:

Código ASP:

<div runat="server" id="container">
            <div runat="server" id="banner" style="background-color: #FFFFFF">
                <div runat="server" id="branding" >
                    <asp:HyperLink runat="server" NavigateUrl="~/">Tienda</asp:HyperLink>
                </div>
                <div id="imagen" runat="server">
                    <asp:Image ID="Image1" runat="server" ImageUrl="Images/ima_home/cab_la14_r1_c2.jpg"/><asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="Images/ima_home/cab_la14_r1_c3.jpg" ImageAlign="Right" CssClass="ImageMap1" HotSpotMode="Navigate">
                       <asp:RectangleHotSpot Top="53" Bottom="32" Left="26" Right="71" NavigateUrl="~/Default.aspx" HotSpotMode="Navigate" /> 
                       <asp:RectangleHotSpot Top="65" Bottom="32" Left="101" Right="71" NavigateUrl="~/Cart.aspx" HotSpotMode="Navigate" />
                       <asp:RectangleHotSpot Top="108" Bottom="32" Left="143" Right="71" NavigateUrl="~/Cuenta.aspx" HotSpotMode="Navigate"/>
                       <asp:RectangleHotSpot Top="149" Bottom="32" Left="171" Right="71" NavigateUrl="~/Profile/Default.aspx" HotSpotMode="Navigate" />
                       <asp:RectangleHotSpot Top="197" Bottom="32" Left="243" Right="71" NavigateUrl="~/Contactenos.aspx" HotSpotMode="Navigate" />
                       <asp:RectangleHotSpot Top="251" Bottom="32" Left="285" Right="71" NavigateUrl="~/HelpUser.aspx" HotSpotMode="Navigate"/>
                    </asp:ImageMap>                    
                    <br />
                    <br />                   
                </div> 
</div>
 

y el codigo del .css es:

Código CSS:

#ctl00_branding a
{
 
    height: 120px;
    width: 154px;   
    text-indent: -5000px;
    background: url(cab_la14_r1_c1.jpg) no-repeat;   
    font-size: 2em;
    float: left;
    margin-left:0;
    margin-right:0;
    background-color:White;  
       
}   
 
#ct100_imagen
{
    width:100%;
    border-left:0;
    border-width:0;   
}
.Image1
{   
    width:250px;
    height:75px;       
    background-image: url(cab_la14_r1_c2.jpg)no-repeat;   
    background-position:center top;
    position:absolute;
    float:none;   
    margin-left:0;
    margin-right:0;
    background-color:White;   
}
.ImageMap1
{
    width:374px;
    height:75px;
    background-image: url(cab_la14_r1_c3.jpg)no-repeat;
    background-position:right top;
    background-color:White;   
    position:absolute;
    margin-left:0;
    margin-right:0;   
}
 

El problema es que las imagenes del div (imagen) se muestra bien en una pantalla pequeña, pero si la pantalla es mas grande queda a la mitad, no cubre el total de la pantalla.


Alguien sabe como puedo solucionar esto?

gracias