Immagine di sfondo che si adatta alla finestra
Mi era stato chiesto se fosse possibile dare una dimensione in percentuale ad un’immagine di sfondo in modo da far adattare l’immagine alla finestra. Al momento non è possibile fare una cosa del genere con i css e per questo ho creato questo piccolo script javascript che risolve il problema.
Lo script è disponibile in due versioni, nella prima l’immagine viene deformata per adattarsi alla finestra:
Nella seconda l’immagine occupa lo spazio disponibile senza deformarsi e in caso facendo apparire le barre di scorrimento del browser:
Personalmente non credo sia una buona scelta di design utilizzare uno sfondo che si deforma ma chi sono io per vietarvi di farlo.
Comunque, l’utilizzo dello script è davvero estremamente semplice in modo che sia accessibile a tutti, per utilizzarlo dovete solo carichere jquery, se gia non lo state utilizzando, e il mio script, in questo modo:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/bg_resize.js"></script>
ricordate che vanno inseriti all’interno dei tag <head> e </head> della pagina
in questo modo l’immagine utilizzata come sfondo della pagina
<body background="immagine.png">
verrà riconosciuta automaticamente e ridimensionata quando viene ridimensionata la finestra.
Nel file zip trovate anche i due esempi di utilizzo.
Questa è una versione personalizzata per LC dove l’immagine di sfondo non supera l’altezza della pagina e viene adattata la posizione di un’area di testo alla base della pagina (in IE6 non supporta position bottom)
