collocare uno sfondo su un'immagine

[iboz]

ciao a tutti, avrei u problema. ho creato un database ed adesso il cliente deve inserire le foto all'interno del programma, ma vorrei che una volta visualizzate avessero gli angoli stondati. onde evitare di spiegare al cliente come creare quest'effetto con photoshop è possibile creare uno stile con i css che mi permetta di inseire una foto sotto ad uno sfondo che avrà gli angoli stondati ed all'interno sarà trasparente?

grazie, ciao
ilaria

[ricman]

Originariamente inviato da iboz
inseire una foto sotto ad uno sfondo che avrà gli angoli stondati ed all'interno sarà trasparente?

Ci vuole la tua foto "cornice" in gif (bucata, come dicevi tu) e poi devi giocare coi livelli sovrapponendoli... dovrebbe funzionare....

[iboz]

ok, ma il codice css? potresti inviarmelo? grazie mille, ciao

[pierofix]

Qui credo sia necessario utilizzare un po' di markup non semantico, o meglio, leggermente di troppo. L'idea è prevedere un paragrafo come contenitore dell'immagine, alla quale associare uno <span> (vuoto) fratello.

<p class="polaroid">
   <span></span>
   [img]colosseo.jpg[/img]
</p>

Ora, basterà posizionare lo span su un piano (z-index) rialzato rispetto all'immagine, applicando ad esso uno sfondo, ovvero la cornice (una gif bucata nel mezzo) :

.polaroid
{
   position:relative;
}
.polaroid,
.polaroid *
{
   width:400px; height:300px; /* Dimensioni immagine */
}
   .polaroid span
   {
      position:absolute; top:0, left:0;
      display:block;
      z-index:1;
      background-image:url('cornice.gif');
   }

Non ho mai provato, ma dovrebbe funzionare. Facci sapere.

[iboz]

ok, grazie, adesso provo e vi faccio sapere, ciao
ilaria