Ciao a tutti,

Dovrei rappresentare un box con bordi arrotondati e fin qui tutto bene, creo 3 div come ho sempre fatto, uno con l'immagine di sfondo ripetuta, al suo interno annidato un altro div con sfondo allineato in alto e non ripetuto ed un terzo annidato con sfondo allineato in basso, per rendere idealmente l'idea:

codice:
<div class="background">
<div class="top">
<div class="bottom">

contenuto

</div></div></div>
Questo metodo è sempre andato bene fino ad ora che tutte le immagini utilizzate sono PNG 24 bit con trasparenza. In questo caso infatti i due sfondi utilizzati per rappresentare la parte superiore e la parte inferiore, infatti, risentono della trasparenza rispetto all'elemento ripetuto. Mi spiego meglio, se il bottom ha bordi arrotondati, ad esempio, nella parte mancante dell'arrotondamento rivedo lo sfondo ripetuto, e lo stesso per il resto, in trasparenza del top o del bottom rivedo lo sfondo.

Devo utilizzare questo metodo perchè parte del contenuto di detto box va a finire sia sul top e sia sul bottom, quindi non posso utilizzare aree non annidate.

A voi si è mai presentata una situazione del genere? come mi consigliate di risolvere ?

Grazie