Ciao a tutti,
devo creare un layout fluido che si adatti alla risoluzione del browser in verticale, ovvero la pagina è suddivisa in 3 parti: header, parte centrale dedicata ai contenuti e il footer.

La parte header contiene un'immagine che deve adattarsi al div contenitore, la parte dei contenuti varierà in base alla quantità dei testi, mentre il footer deve essere posizionato sempre a fondo pagina, indipendentemente dall'altezza della parte centrale.

Ho impostato il codice in questo modo:
codice:
body, html 
{
width:100%;
height:100%;
margin:0;
padding:0;
}

#topsection{
background-color: #DEF2FC;
background-image: url(images/header/slide-01.jpg);
background-repeat: no-repeat;
height: 261px;
}

#contentwrapper{
width: 100%;
}

#contentcolumn
{
margin: 0 0 0 0; 
}

#footer{
position:absolute;
bottom:0;
clear: left;
width: 100%;
background-color:#8cc63f;
color: #FFF;
text-align: center;
padding: 4px 0;
}
mentre la pagina html in questo modo:

codice:
<body>
    <div id="maincontainer">
        <div id="topsection">header</div>
        <div id="contentwrapper">
            <div id="contentcolumn">
            	<div>parte centrale</div>
            </div>
        </div>
        <div id="footer">footer</div>
    </div>
</body>
Fin qui tutto ok, ho verificato con i vari browser e non ho trovato delle diversità, quello che non riesco a fare è come mettere un'immagine di sfondo nell'header che si adatti al div contenitore, nel mio caso a "topsection". Ho provato richiamando l'immagine creata, ma in questo modo se provo a visualizzare la pagina con delle risoluzioni diverse, tale immagine risulta tagliata :/

Come posso fare?
Vi ringrazio per l'aiuto,
Elisa