Immagine di sfondo riadattabile

23 ott 2011    No Comments    Categoria: Plugins

Riceviamo e volentieri pubblichiamo un plugin jQuery di un giovane webdesigner italiano, Domenico Falco, che permette di adattare l’immagine di sfondo di una pagina web alle dimensioni del browser, facendo in modo che quando quest’ultimo viene ridimensionato anche l’immagine si riadatti alle nuove dimensioni.

Di plugin di questo tipo ve ne sono molti, ma quasi tutti sono complessi da integrare nelle pagine.
ratiobg è veramente semplice da integrare: è sufficiente caricare jQuery, il plugin ratiobg ed il seguente codice

<script type="text/javascript">
jQuery(document).ready(function(){
   if(jQuery('img.resize').length > 0) {
      jQuery('img.resize').ratiobg();
   }
});
</script>

nell’head della pagina, non dimenticandosi di inserire nel foglio stile le seguenti istruzioni:

body {overflow:hidden;}
img.resize {position:absolute;z-index:-1;}

in modo che il tag img lavori come immagine di background.
E’ sufficiente poi inserire l’immagine da utilizzare come sfondo, attribuendole la classe resize.

ratiobg è veramente leggero (1,24 Kb, non compresso) e svolge egregiamente il suo lavoro, come potete vedere nella pagina di esempio che abbiamo montato per l’occasione http://www.jqueryitalia.org/tutorial/ratiobg.html.

Abbiamo testato il plugin in tutti i moderni browser (Firefox, Opera, Chrome, Safari e IE) senza riscontrare alcun problema.

Download