Problema per box con immagini di sfondo PNG 24bit

[SGr33n]

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:

<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

[Mich_]

Fondamentalmente ci sono due metodi per fare angoli arrotondati: quello che usa le imamgini, e quello che usa JS per rigenerare gli angoli.
Vedi se con i "nifty borders" puoi realizzarte quello che chiedi.
(trovi i riferimenti tra i "link utili")

[SGr33n]

Grazie della risposta Mich_ praticamente questo box ha delle sfumature sia nella parte alta che in quella bassa quindi l'arrotondamento degli angoli non basterebbe, ed il metodo con le immagini è appunto quello che ho utilizzato. Mi potrebbe venire in aiuto una proprietà del background che permetta di lasciare un margine alto ed uno basso per la ripetizione del background, ma a quanto pare non esiste :P

[Mich_]

Mi potrebbe venire in aiuto una proprietà del background che permetta di lasciare un margine alto ed uno basso per la ripetizione del background, ma a quanto pare non esiste

In alto e a sinistra puoi lasciare uno spazio prima del background. La proprieta` da usare e`:
background-position: x-pos y-pos;

Ma non funziona in basso e a destra, per cui non so se ti puo` essere utile.

[SGr33n]

Originariamente inviato da Mich_
In alto e a sinistra puoi lasciare uno spazio prima del background. La proprieta` da usare e`:
background-position: x-pos y-pos;

Ma non funziona in basso e a destra, per cui non so se ti puo` essere utile.

No, infatti cmq ti ringrazio di avermi anche chiarito questa cosa, pensavo la posizione potesse essere dichiarata solo per i background non ripetuti