Problema dimensioni immagine di sfondo

[Jamaslab]

Sto creando un sito nel quale compare una tabella composta da tre colonne e 1 riga definita così.

<table width="100%">
<tr>
<td style="text-align:center" width="20%" valign="top">
Qui ci sono i pulsanti </td>
<td width="60%" valign="top" style="background:url(Immagini/center.gif);">
[img]Immagini/top.gif[/img]
<center>
<div class="innero" style="width:80%px">
qui ci metto il testo della colonna centrale
</div></center>
[img]Immagini/bottom.gif[/img] </td>
<td width="1%"> colonna per fare un po' di spazio </td>
<td style="text-align:center" valign="top" width="19%">
e qui la terza colonna </td>
</tr>
</table>

Dunque succede che con risoluzioni elevate, l'immagine di Backgroun della colonna centrale center.gif non occupi, come top.gif e bottom.gif, l'intero spazio della colonna, ma si ripeta più volte lungo l'asse x. se metto un repeat-y non si adatta comunque alle dimensioni della colonna e quindi vengono fuori problemi di allineamento. Come faccio a fare in modo che center.gif si adatti alle dimensioni della colonna indipendentemente dalla risoluzione?

[H5N1_Aviaria]

Ingrandisci l'immagine considerando una risoluzione massima ipotetica (ad esempio 1280x1024).
Questo ti porterà al problema inverso: alle risoluzini più basse l'immagine risulterà tagliata.
Ecco perchè una delle tecniche migliori consiste nello "spezzettare" lo sfondo e ripartirlo in contenitori diversi o, con risultati meno brillanti, utilizzare uno sfondo di tessitura.