JAVASCRIPT SCRIPT

Immagine che si adatta alle dimensioni dello schermo

Spesso capita di avere la necessità di impostare un'immagine di sfondo (background) che si adatti alle dimensioni dello schermo.
In questo articolo vi presento un semplice script javascript che crea questo tipo di effetto.
Riporto qui sotto i passaggi necessari, dopo aver scaricato il file, per creare un'immagine che si adatta allo schermo.

DOWNLOAD DEMO

IMPLEMENTAZIONE HTML

Nella parte superiore della vostra pagina all'interno del tag head includete il file javascript che avete scaricato.

<script type="text/javascript" src="immagine_sfondo.js"></script>

Assegnate ora al tag body i seguenti stili css.

<body style=" overflow:hidden; margin:0; padding:0;">

Inserite ora l'immagine che volete utilizzare come sfondo, facendo attenzione ad assegnare un id, dichiarare le dimensioni reali dell'immagine ed assegnarle gli stili indicati.

<img src="img/sfondo.jpg" id="sfondo" height="1200" width="1300" style="position:absolute; left:0; bottom:0; right:0; top:0; z-index:0;" />

IMPLEMENTAZIONE JAVASCRIPT

É sufficiente fare un'istanza della classe presente nel file javascript passando come parametro l'id assegnato precedentemente all'immagine.

<script type="text/javascript">
new ImmagineSfondo('sfondo');
</script>

Dopo aver eseguito questi semplici passaggi avrete creato un'immagine di fondo che si adatta alle dimensioni dello schermo.