Testo scorrevole che passa sotto un div trasparente

[Lillo78]

Ciao a tutti, mi sono appena iscritto ma ogni tanto leggo qualche vostra discussione.
Ora ho bisogno di chiedervi un consiglio.
Ho una pagina formata dal seguente codice HTML:

<div id=container> <div id=contentSide> [img]logo.png[/img] </div> <div id=sidebar> <h2 id=title>Menus</h2> <hr/> <p id=description class=functionMenus align="center"> CAFFE MORETTI FUNCTION MENUS
 PRICE PER PERSON
 <span id>MENU 1</span>
 $44.50
</br> <span class=plateName>Pizza Bianca</span>
 garlic, rosemary, origano & extra virgin olive oil
</br> <span class=plateName>Hot olives with anchovy and chilli & </span>
 mushrooms sautéed in garlic and extra virgin olive oil
</br> <span class=plateName>Italian Mixed Salad</span>
</br> <span class=plateName>Platters of:</span>
 Penne Crema di Gamberi, Ravioli Sorrentina & Fettuccine Boscaiola penne with fresh prawns, brandy, napoletana sauce and cream, ravioli stuffed with spinach and ricotta topped with bocconcini and napoletana sauce, fettuccine with ham, mushrooms and cream
</br> <span class=plateName>Mixed Pizza</span>
 our most popular pizzas served to share
</br> <span class=plateName>Tea or Coffee</span>

 <span>MENU 2</span>
</br> $53.00</br> Tasting menu</br></br> <span class=plateName>Pizza Bianca</span></br> garlic, rosemary, extra virgin olive oil</br></br> <span class=plateName>Antipasti Misti</span></br> prosciutto & parmigiano, hot olives</br> with anchovies & chilli, sautéed mushrooms</br></br> <span class=plateName>Pepata di Cozze</span></br> black mussels in garlic, pepper, tomato and white wine</br></br> <span class=plateName>Gamberi al Aglio</span></br> prawns in extra virgin olive oil and garlic</br></br> <span class=plateName>Pasta Mista</span></br> selection of our most popular pasta dishes</br></br> <span class=plateName>Salsiccia alla Griglia</span></br> char grilled roman sausage sliced and served</br></br> <span class=plateName>Tagliata di Carne</span></br> char grilled grain fed scotch fillet sliced and topped with fresh rocket and shaved parmigiano,</br> drizzled with balsamic vinegar & extra virgin olive oil</br></br> <span class=plateName>Mixed Italian Salad</span></br></br> <span class=plateName>Pizza Nutella</span></br> our famous dessert pizza smothered in mouth watering nutella</br></br> <span class=plateName>Complimentary Coffee or Tea</span></br> </p> </div>

Ora, come potete vedere, è presente un DIV Container che occupa l'intera pagina, all'interno ci sono due DIV principali, SIDEBAR e CONTENT, dentro SIDEBAR c'è un testo che scorre e vorrei che quel testo sparisse sotto il LOGO che però è trasparente.
Ho creato cosi un div contentSide che contiene il logo, ma ovviamente questo non ha uno sfondo e quindi la cosa risulta essere inutile.
Ecco una parte del foglio di stile:

#container{ width:100%; margin:0px 0px 0px 0px; height: auto; } #backGroundImage{ position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1 } #sidebar{ width:40%; min-height:630px; float:left; position:relative; z-index:-1; } #contentSide{ width:40%; height:25%; position:fixed; top:0px; left:0px; z-index:2; } span{ color:#9F0013; font-size:20px; } span.plateName{ color:F7E1CE; font-size:18px; } #title{ position:absolute; top:70px; left:50px; color:#9F0013; } h2{ font-family:arial; color:#9F0013; letter-spacing:-3px; } hr{ position:absolute; top:195px; left:81px; height:2px; width:60%; border:0px; background-color:#9F0013; } #description{ font-family:Arial; color:#F9E2D7; position:absolute; left:31px; top:205px; } #functionMenus{ text-align:center; color:#F7E1CE; } #logo{ position:fixed; top:10px; left:10px; } #content{ width:60%; min-height:630px; float:left; }

come vedete sia il contentSide che il logo sono con position:fixed ed il testo dovrebbe quindi passarci sotto ma ovviamente le scritte si vedono passare sotto il logo.
Speravo che con un gioco di z-index sui due div si riuscisse fare qualcosa ma purtroppo non sono riuscito.
In poce e seplici parole, il testo dovrebbe scorrere sotto il logo Moretti ma senza vedersi, come se ci fosse un div con uno sfondo.
Ecco un anteprima della pagina: http://lillostyle.altervista.org

Grazie in anticipo

[Prill]

soltanto dopo molti ingrandimenti il logo va a sovrapporsi alla parte marroncina dello sfondo, dubito che qualcuno zummi tanto, quindi potresti risolvere usando come logo un'immagine non trasparente (con sfondo nero o corrispondente alla parte più scura dello sfondo principale)

[Lillo78]

Questa "soluzione" purtroppo renderebbe il layout fluido della pagina assolutamente instabile, soprattutto per i dispositivi mobili, come tablet e smartphone dove le dimensioni sono ridotte e si necessita spesso di molto Zoom soprattutto per testi grandi.

Qualcuno con una soluzione?