Si pone talvolta l’esigenza di impostare una singola immagine di sfondo alla pagina del nostro sito, che presenti le seguenti caratteristiche:
1) deve ridimensionarsi in relazione alla viewport (dimensione, o meglio risoluzione dello schermo dell’utente),
2) non deve deformarsi in seguito a quanto sopra, vale a dire le proporzioni devono restare immutate.
Sembra facile ma, come sanno bene gli sviluppatori, non lo è anche se la nuova versione dei Cascading Style Sheet facilita di molto la vita.
Vediamo dunque come procedere:
CSS3
E’ stata introdotta la nuova proprietà background-size, impostandone il valore su contain o cover è possibile ottenere l’effetto desiderato.
Il codice CSS sarà dunque:
body {
margin: 0;
padding: 0;
background: url(immagini/index.jpg) no-repeat center center fixed;
-moz-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
}
Usando contain, l’immagine non viene deformata ma può lasciare degli spazi bianchi sul lato lungo dello schermo; usando cover, invece, l’immagine riempie interamente lo schermo ma può deformarsi.
Il limite è rappresentato dal fatto che solo i browser più recenti supportano la proprietà in questione.
Pur adottando la sintassi differenziata vista sopra (pur specificando cioè mozilla o webkit quali “motori” del browser), resta il problema di Internet Explorer che supporta background-size solo dalla versione 9; come è noto, chi ha un PC che gira sotto Windows XP non può avere una versione superiore alla 8 quindi si tratta di un problema serio che richiede una soluzione alternativa.
CSS2 e jQuery
Una soluzione basata su CSS2 è quella che prevede di inserire l’immagine in un contenitore che si ridimensiona in base alla risoluzione dello schermo, come suggerito in questa pagina alla quale rinvio il lettore: http://www.gleenk.com/immagine-di-sfondo-fissa-tutto-schermo/
Personalmente tuttavia preferisco fare ricorso a jQuery ed uno dei plugin disponibili per realizzare gallerie fotografiche a tutto schermo, applicando però una sola immagine: nella fattispecie ho testato con successo Supersized!, che si può trovare al sito http://buildinternet.com/project/supersized/
Vediamo come procedere.
Scarichiamo l’ultima versione del framework jQuery e del plugin Supersized ed inseriamo il seguente codice nella sezione head della pagina:
<!– css –>
<link href=”css/miosito.css” rel=”stylesheet” type=”text/css” />
<link href=”css/supersized.core.css” rel=”stylesheet” type=”text/css” media=”screen” />
<!– /css –>
<!– jQuery –>
<script type=”text/javascript” src=”js/jquery-1.9.0.min.js”></script>
<script type=”text/javascript” src=”js/supersized.core.3.2.1.min.js”></script>
<script type=”text/javascript”>
jQuery(function($){
$.supersized({
// Slides
slides: [
{image : ‘./immagini/index.jpg’, title : ‘Mio sito’}
]
});
});
</script>
<!– /jQuery –>
Dobbiamo dunque collegare: 1) il foglio di stile di base del plugin, 2) la libreria di jQuery, 3) il plugin, dopo di che specificare il percorso dell’immagine che deve fungere da sfondo.
Stiamo come sempre attenti ai percorsi indicati e, nel foglio di stile supersized.core.css, modifichiamo o eliminiamo le regole presenti che dovessero essere in conflitto con quelle del nostro foglio di stile, ad esempio quella relativa al colore di sfondo della pagina.
Questa tecnica funziona anche in IE7 e IE8, oltre che in tutti gli altri browser da sempre aderenti alle raccomandazioni del W3C.
Un’ultima annotazione. Se l’immagine che dovete impostare come sfondo deve essere allineata in basso nella pagina e non al centro, otterrete un risultato migliore apportando una piccola modifica al file supersized.core.3.2.1.js (nel momento in cui scrivo, questo è l’ultimo rilascio del plugin).
Andate alla linea 230 e sostituite il codice:
$(this).css(‘top’, (browserheight – $(this).height())/2);
con:
$(this).css(‘top’, (browserheight – $(this).height()));
Con un po’ di attenzione è possibile trovare questa parte di codice anche nella versione minimizzata del plugin e modificarla a sua volta.