I CSS mostrano un’immagine di sfondo div divisa in cima ad altri elementi contenuti

Non sono sicuro se sia ansible e come, ma ho provato a giocare con lo z-index degli elementi nel mio codice senza successo.

Ho un elemento div che ha un’immagine di sfondo impostata in css. all’interno del div, ho altri elementi, come div e img. Sto cercando di mantenere il div principale che contiene l’immagine di sfondo in cima, dal momento che voglio che l’immagine di sfondo mostri sopra gli altri elementi (questa immagine di sfondo ha degli angoli arrotondati che voglio mostrare sopra l’immagine inclusa in questo div).

Esempio HTML:

Esempio di CSS:

 /* How can I make the bg image of this div show on top of other elements contained Is this even possible? */ #mainWrapperDivWithBGImage { background: url("myImageWithRoundedCorners.jpg") no-repeat scroll 0 0 transparent; height: 248px; margin: 0; overflow: hidden; padding: 3px 0 0 3px; width: 996px; } 

Metterei un z-index: 100; assolutamente posizionato z-index: 100; span (o span) con lo background: url("myImageWithRoundedCorners.jpg"); #mainWrapperDivWithBGImage .

Se si utilizza l’immagine di sfondo per gli angoli arrotondati, preferirei aumentare lo stile di riempimento del div principale per dare spazio sufficiente per rendere visibili gli angoli arrotondati dell’immagine di sfondo.

Prova ad aumentare il padding dello stile div principale:

 #mainWrapperDivWithBGImage { background: url("myImageWithRoundedCorners.jpg") no-repeat scroll 0 0 transparent; height: 248px; margin: 0; overflow: hidden; padding: 10px 10px; width: 996px; } 

PS: presumo che gli angoli arrotondati abbiano un raggio di 10px.

Che ne dici di rendere il

come tre div, in cui le due div esterne mantengono le immagini degli angoli arrotondati, e la media div ha semplicemente un colore di sfondo per abbinare le immagini degli angoli arrotondati. Quindi potresti semplicemente posizionare gli altri elementi nel div intermedio o:

 #outside_left{width:10px; float:left;} #outside_right{width:10px; float:right;} #middle{background-color:#color of rnd_crnrs_https://stackoverflow.com/questions/4556656/css-show-div-background-image-on-top-of-other-contained-elements/foo.gif; float:left;} 

Poi

HTML:

 

Potrebbe essere necessario fare posizione: relativo; e simili.