BG-Image espandibile assieme al div contenitore

[Nix_Crowd]

Salve ragazzi!

Sto sbattendo la testa con un problema da qualche giorno:

Ho un div contenitore:

div#contenuti{
float:right; 
width:370px;
height:auto;
margin:40px auto;
background-color:#ffffff; 
background-image: url(immagini/box-sfondo.gif); 
background-repeat:no-repeat; 
border: 10px #666666; 	
margin-right:10px; 
padding:10px;}

...vorrei fare in modo che l'immagine di sfondo si allunghi in altezza se il div si allunga, o viceversa se si restringe... ho tentato di trovare risposta googlando ma niente ... e presumo che probabilmente neanche c'è questa possibilità ... -.-"

[KillerWorm]

Ciao,
dalle esigue ricerche che ho fatto in 5 minuti ho trovato che è possibile risolvere facilmente il tuo problema con CSS3, il quale supporta la proprietà background-size assieme ad altre che regolano l'aspetto dell'immagine di background.
http://www.w3.org/TR/2002/WD-css3-ba...ackground-size

Queste proprietà non sono supportato su CSS2 e pertanto, attualmente (e per qualche annetto ancora, immagino), sarebbe meglio evitarle se si vuole garantire un certo cross-browsing.

Su firefox, tali proprietà sono supportate adoperando il suffisso -moz-.
Nel tuo caso è quindi possibile usare una regola del tipo:

-moz-background-size: auto 100%;

Un workaround plausibile potrebbe essere l'utilizzo di javascript. Ho visto qualche esempio cercando con google (querystring: css background resize).

[Mich_]

In realta` la risposta positiva sta nei CSS3. Pero` per quanto ne so, questa funzione e` ancora troppo poco supportata.
Ci sono un paio di articoli sull'argomento nelle raccolte di HTML.it. Non ricordo quali di questi articoli trattano del tuo problema:

Sfondi a tutta pagina con i CSS
Immagini di sfondo multiple con i CSS3
Nuove proprietà per gli sfondi nei CSS3

[Nix_Crowd]

Grazie ragazzi per le ottime risposte!!

Nel primo post mi son scordato di informarvi del fatto che non posso usare i CSS3 per il fatto che non vengono supportati dai browser vecchi (e neanche da tutti quelli nuovi ... maledetto IE9 che non supporta neanche il border-image -.-"). Questo perchè il sito deve essere ben visibile "ovunque", o perlomeno nella maggior parte dei casi.

Comunque ho risolto il problema sfruttando la vecchia tecnica delle immaginette 5 immaginette .gif!!

posto il codice trovato in giro per la rete così magari risparmio il lavoro di ricerca a qualcuno:

l'immagine usata per gli angoli è una sola da 50x50 pixel

HTML di Base

<div id="contenitore"> 
<div class="css_angoli" id="angolo_superiore_sinistra"> 
<div class="css_angoli" id="angolo_superiore_destra"></div> 
<div class="colore_sfondo"></div> 
</div> 
<div class="contenuto">CONTENUTO</div> 
<div class="css_angoli" id="angolo_inferiore_sinistra"> 
<div class="css_angoli" id="angolo_inferiore_destra"></div> 
<div class="colore_sfondo"></div> 
</div> 
</div> 

CSS

#contenitore{
/*la larghezza del riquadro – non obbligatorio*/
width:300px;
}
/*stile css comune per tutti gli angoli*/
.css_angoli{
/*l’immagine di sfondo*/
background:url(angoli_arrotondati.png) no-repeat;
/*l’altezza – la metà dell’immagine di sfondo*/
height:25px;
}
#angolo_superiore_sinistra{
/*immagine di sfondo posizionata in alto a sinistra*/
background-position:top left;
}
#angolo_superiore_destra{
/*immagine di sfondo posizionata in alto a destra*/
background-position:top right;
}
#angolo_inferiore_sinistra{
/*immagine di sfondo posizionata in basso a sinistra*/
background-position:bottom left;
}
#angolo_inferiore_destra{
/*immagine di sfondo posizionata in basso a destra*/
background-position:bottom right;
}
.colore_sfondo{
/*colore di sfondo per riempire la zona tra i 2 angoli*/
background-color:#99CC33;
/*l’altezza*/
height:25px;
/*posizionamento dell’elemento in rapporto con suoi angoli*/
/*eguale a margin-top:-25px;margin-right:25px;margin-bottom:0;margin-left:25px;*/
margin:-25px 25px 0 25px;
}
.contenuto{
/*colore di sfondo del contenuto*/
background-color:#99CC33;
/*spazio di 20px a destra e sinistra tra il bordo dell’elemento e il suo contenuto – non obbligatorio*/
padding:0 20px;
} 

HTML con CSS integrato

<!–inizio contenitore principale–>
<div>
<!–inizio parte superiore–>
<!–angolo superiore sinistra–>
<div style="background:url(angoli_arrotondati.png) no-repeat top left;height:25px;">
<!–angolo superiore destra–>
<div style="background: url(angoli_arrotondati.png) no-repeat top right;height:25px;"></div>
<!–bordo superiore–>
<div style="background:url(bordi_orizzontali.png) repeat-x top;height:25px;margin:-25px 25px;"></div>
</div>
<!–fine parte superiore–>
<!–bordo sinistra – inizio contenitore contenuto–>
<div style="background:#8AE3FF url(bordo_left.png) repeat-y left;">
<!–bordo destra – contenuto proprio–>
<div style="background:url(bordo_right.png) repeat-y right;padding:0 20px;">
CONTENUTO
</div>
</div>
<!–fine contenitore contenuto–>
<!–inizio parte inferiore–>
<!–angolo inferiore sinistra–>
<div style="background:url(angoli_arrotondati.png) no-repeat bottom left;height:25px;">
<!–angolo inferiore destra–>
<div style="background:url(angoli_arrotondati.png) no-repeat bottom right;height:25px;"></div>
<!–bordo inferiore–>
<div style="background:url(bordi_orizzontali.png) repeat-x bottom;height:25px;margin:-25px 25px;"></div>
</div>
<!–fine parte inferiore–>
</div>
<!–fine contenitore principale–> 

[Nix_Crowd]

doppio post -.-"