A volte è una soluzione che può fare la differenza: avere il proprio layout disposto su uno sfondo che prende tutta la pagina perfettamente.
Si è scritto tanto finora e si continua a scrivere. Perchè una soluzione ovvia, e anche semplice, cioè una proprietà del background in css, c’è ma non è ancora universalmente funzionante. A supportarla sono finora soltanto gli ultimissimi browser, io l’ ho testata e a dire la verità non mi sembrava funzionasse ancora in maniera perfetta nemmeno laddove il supporto esiste già.
Il css3 introduce infatti due proprietà per il background:
- background-size
- background-origin
La prima è proprio quella che riguarda le dimensioni, che possono esssere specificate sia in pixel che in percentuale. Ovviamente utilizzando la percentuale il background dovrebbe essere ridimensionato in base alla dimensione dello schermo. Io l’ ho testata ma non mi è sembrato che i rapporti siano perfetti. In ogni caso non è soluzione utilizzabile per lo scarso supporto che hanno finora i css3.
L’ alternativa è Javascript. Di script ne ho testati un pò, fino ad arrivare a quello che ridimensiona in modo perfetto e che è compatibile con tutti i browser testati, da IE7 in poi, per indenderci.
Supersized è sicuramente il migliore. Plugin jQuery che permette di inserire delle slides di immagini oppure di recuperare i nostri sfondi direttamente da Flickr.
Per provare ad utilizzarlo, basta aggiungere tra i tag <head> e </head> qualche riga di codice, il codice include la libreria jQuery hostata su Google, lo script che scaricate dal link sopra e indica il percorso della vostra immagine.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script> <!-- jQuery library da google -->
<!--some css --><script type="text/javascript" src="js/supersized.3.1.3.core.min.js"></script> <!-- the plugin with less code--><script type="text/javascript">// <![CDATA[
jQuery(function($){ $.supersized({ //Immagini di sfondo: [ { image : 'images/body-bg.png' } ] }); });
// ]]></script>
Insomma basta davvero poco!
Fonte: Questo è la traduzione di un mio articolo in inglese su PixyLabs, il mio piccolo studio web nato a Londra. Il sito è ancora in via di definizione, perciò abbiate ancora un pò di pazienza…grazie..
Loading ...