Grazie all’uso della proprietà css z-index, possiamo facilmente aggiungere uno sfondo Flash (swf) a un contenuto HTML.

Le base per aggiungere un swf come sfondo sono…

Per il contenitore che contiene entrambi swf e altri elementi html:

• un width e height, larghezza e altezza
• una position:relative; per potere posizionare il swf in modo assoluto in rapporto a questo contenitore

Per l’elemento che contiene il filmato flash:

• un z-index inferiore in modo che il swf rimane al di sotto
• una position:absolute; per toglierlo del flusso naturale e potere posizionare al di sopra gli altri elementi html

Per l’elemento che contiene il contenuto html:

• un z-index superiore in modo che rimane al di sopra del filmato flash
• una position:relative; per posizionarlo nel suo contenitore

Per il filmato flash stesso:

• Pubblicarlo con sfondo trasparente per ottenere il codice giusto da inserire o aggiungere manualmente il parametro wmode con il valore transparent

L’HTML di base:

<div id=”wrapper”>
<div id=”sfondo”>
Inserire qui il filmato flash
</div>
<div id=”contenuto”>
Inserire qui il contenuto html
</div>
</div>

Il CSS di base:

#wrapper{
height: 400px;
width: 500px;
position: relative;
}
#sfondo{
z-index: 1;
position: absolute;
}
#contenuto{
z-index: 2;
position: relative;
}

Nel seguente esempio, ho usato un swf con un effetto neve sopra il quale ho posizionato un titolo h2.

Il risultato:

NB: dovuto a un bug del Flash Player, questa tecnica non funziona per gli utenti Linux

Condividi questo articolo su