Impostare sfondi diversi per tabelle diverse

[alkasel]

Salve a tutti. È la prima volta che scrivo.
Dal titolo il problema sembra molto semplice, ma per me non lo è.
Ho cercato soluzioni sul web, ma non le ho trovate, quindi mi sono risolto a chiedere a voi. Ho anche provato ad usare la funzione "cerca" del forum ma non ho trovato ciò che cerco. Vi espongo il problema.

Sto curando questo sito: impegnoeresp.altervista.org
è realizzato con una tabella in alto che implementa il titolo;
il sottotitolo (la descrizione di 4 righe), si trova non in tabella, e lo sfondo è un gradiente, questo: colorzilla.com/gradient-editor/#f2f2f2+15,7db9e8+25;Custom
tutto il resto è una tabella unica, che ha come sfondo questo:
colorzilla.com/gradient-editor/#7db9e8+0,accce5+25,7db9e8+50,accce5+75,7db9e8+100 ;Custom
Il problema è che, quando scrivo tante cose in una pagina, e io voglio poter scrivere tante cose in verticale in una pagina,
lo sfondo della pagina si "allunga", quindi si spostano tutti i colori e lo sfondo della seconda sezione, quella dove c'è il sottotitolo, diventa completamente bianco
(lo potete vedere bene semplicemente diminuendo di molto lo zoom della pagina).
Questo era quello che era successo qui:
impegnoeresp.altervista.org/Membri.html
e che mi ha costretto a ridefinire lo sfondo per questa singola pagina. Ma appena modificherò la pagina, aggiungendoci qualcosa, ritornerà il problema di prima e dovrò cambiare nuovamente lo sfondo.
Ma non si può andare avanti così. Allora ho pensato alla soluzione di mettere il sottotitolo dentro una tabella e mettere come sfondo della tabella
questo: impegnoeresp.altervista.org/Immagini/Sfondo.jpg (lasciate perdere il fatto che per sbaglio mi ci è rimasta la freccina del mouse nel disegno xD)
L'ultimo problema che viene fuori a questo punto è che, creando due tabelle, utilizzando <style>, le due tabelle assumono lo stesso sfondo,
come è successo nella pagina dove ho messo in pratica quest'ultima trovata:
impegnoeresp.altervista.org/Elenco_iniziative.html
Immagino di sbagliare qualcosa nel condice o a livello concettuale, alla fine io uso gli style ma non so neanche bene cosa fanno di preciso.

Scusate per quanto sono prolisso, ma per spiegare bene una cosa credo si debba fare così.

Vi faccio vedere un frammento di codice, dal quale capirete che non sono un esperto di html, anzi.

<!--Sottotitolo-->
<table height="140px" width="100%" cellspacing="0" cellpadding="0" border="1">
<style>
table {
background-image: Immagini/Sfondo.jpg;
background-repeat: no-repeat;
}
</style><td>
<br><br><br><br><div align="center"><font size="4" face="geneva" color ="000066"><b><i>ciao</i></b></div></font>
</td></table>

/*........*/

<!--Colonna di sinistra-->
<table width="100%" height="100%" cellpadding="10" rules="none">
<tbody>
<style>
tbody{
margin-top:0;
margin-left:0;
margin-right:0;
background: #7db9e8; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj
0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9y
Zy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJS Igdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRp bz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50
IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaX RzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgy PSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2
Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1v cGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1JSIgc3 RvcC1jb2xvcj0iI2E3Y2FlNSIgc3RvcC1vcGFjaXR5PSIxIi8
+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI zdkYjllOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCB vZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iI2E3Y2FlNSIgc3
RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEw MCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT 0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD
0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0i dXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #7db9e8 0%, #a7cae5 25%, #7db9e8 50%, #a7cae5 75%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db9e8), color-stop(25%,#a7cae5), color-stop(50%,#7db9e8), color-stop(75%,#a7cae5), color-stop(100%,#7db9
e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7db9e8 0%,#a7cae5 25%,#7db9e8 50%,#a7cae5 75%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7db9e8 0%,#a7cae5 25%,#7db9e8
50%,#a7cae5 75%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7db9e8 0%,#a7cae5 25%,#7db9e8 50%,#a7cae5 75%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(top, #7db9e8 0%,#a7cae5 25%,#7db
9e8 50%,#a7cae5 75%,#7db9e8 100%); /* W3C */
filter: progidXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */
}
</style>


Ho postato quelle che credo siano le parti che creano problema, ma se ci serve potete tranquillamente vedere tutto il codice della pagina.

Scusate ancora per quanto mi sono dilungato e ringrazio chiunque vorrà rispondermi.
Ale

[gargamella16]

non ho capito molto bene quello che intendi puoi essere piu chiaro? cioe tu vuoi che la div del TITOLO che ha uno sfondo con l'immagine .jpg sia dello stesso colore della DIV dei contenuti?