Immagine di sfondo estendibile in base al container

[Luca_pluatrco]

Ciao,

in un menu orizzontale uso un'immagine con gradiente (dimensioni 1x30, con repeat-x).Nel caso al menu vengano aggiunte più voci, è possibile che alcune di esse vadano ad occupare una seconda riga.

In questo modo però, il container aumenta in altezza, ma l'immagine di sfondo si interrompe a metà, in quanto di dimensioni inferiori alla nuova altezza del container.

Come potrei fare per permettere all'immagine di sfondo si "adattarsi" dinamicamente in base alle dimensioni dell'elemento cui è applicata (possibilmente in puro CSS)?

In tal modo evitarei di dover creare una nuova immagine la cui altezza è pari a quella eventualmente raggiunta dall'elemento padre.

Grazie

[Mich_]

Immagino che l'immagine sia omogenea sul lato orizzontale, mentre il gradiente e` solo verticale.
Quindi devi definire il colore di sfondo che sia uguale al colore del bordo (rileva i dati RGB e copiali uguali).

Se vuoi che il gradiente sia nella parte alta dell'immagine e lo sfondo omogeneo nella parte bassa, devi usare un codice del tipo:

  background-image: url(....);
  background-position top left;
  background-color: #RRGGBB;
  background-repeat: repeat-x;
}

Se invece vuoi che il gradiente sia in basso e l'omogeneo in alto, il -position dovra` avere valori: bottom left;