sovrapposizione di gif su immagine

[psycol]

Ciao,
devo mettere un'immagine gif che faccia da cornice a delle foto che verranno caricate dinamicamente. La gif è trasparente al centro e farà risultare i bordi arrotondati; ho creato un div assoluto da metterci sopra, però non si vede in Explorer 6, qualcuno mi sa dire come risolvere?! Grazie! di seguito i codici!

html:

<div class="mascheraimg"></div>
<div class="imgsx">[img]img/claudia_carretta.jpg[/img]</div>

css:

.mascheraimg{
position:absolute;
width: 70px;
height: 70px;
top:120px;
left:0px;
background-image: url(../img/sovrafoto.gif);
background-repeat: no-repeat;
z-index: 5;
}

.imgsx{
float:left;
display: inline;
height:70px;
width:70px;
margin:0px 0px 0px 0px;
}

[psycol]

nessuno ha un'idea di come si fa'? aiutoo!

[Mich_]

Per sovrapporre due oggetti, la cosa piu` semplice e` che abbiano la stessa dimensione e siano ambedue racchiusi in un blocco.
Poi devi usare i posizionamenti (assoluti o relativi), ma per potrlo fare deve essere posizionato anche il contenitore e ricorsivamente fino al body.
Lo z-index deve esser specificato per tutti i blocchi sovrapposti, altrimenti quello successivo e` per default piu` alto dei precedenti

Quindi: HTML

<div class="contenitore">
  <div class="mascheraimg"></div>
  <div class="imgsx">[img]img/claudia_carretta.jpg[/img]</div>
</div>

CSS:

.contenitore {
  position: relative;      /* anche tutti gli antenati devono essere posizionati */
  width: 70px;
  height: 70px;
  margin:0;
  padding: 0;
}
.mascheraimg {
  position: absolute;
  top:0; left: 0;
  background: transparent url(../img/sovrafoto.gif) no-repeat 0 0;
  z-index: 5;
  width: 100%;
  height: 100%;
}
.imgsx{
  position: absolute;
  top:0; left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
}
.imgsx img {
  position: relative;
  top:5px;         /* spazio per la cornice (le misure sono inventate) */
  left: 5px; 
}

[psycol]

Ok grazie mille , ora funziona anche su ie6! ho messo così:

<div class="contenitore">

<div class="imgsx">
[img]img/claudia_carretta.jpg[/img]
<div class="mascheraimg"></div>
</div>
</div>



.mascheraimg{
position:absolute;
width: 70px;
height: 70px;
top:0px;
left:0px;
background-image: url(../img/sovrafoto.gif);
background-repeat: no-repeat;
z-index: 5;
}
.imgsx{
float:left;
display: inline;
height:70px;
width:70px;
margin:0px 0px 0px 0px;
z-index:4px;
position:relative;
}