Realizzare l'effetto delle immagini di sfondo sempre a tutta pagina anche quando le dimensioni della finestra cambiano richiede la combinazione del posizionamento fisso CSS e della gestione dell'evento resize da parte di jQuery. Vediamo come fare.
L'immagine di sfondo va inserita nel codice HTML all'inizio del documento:
<body>
<img src="bg.jpg" alt="" id="bg" />
<div id="page">...</div>
</body>
Quindi va posizionata in modo fisso:
* {
margin: 0;
padding: 0;
}
#bg {
position: fixed;
top: 0;
left: 0;
}
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
#page {
position: relative;
width: 50%;
padding: 1em;
margin: 5em auto;
background: #fff;
line-height: 1.4;
font: 95% Arial, sans-serif;
}
#page p {
padding: 0.5em;
}
Le classi bgwidth e bgheight saranno usate da jQuery. In jQuery abbiamo bisogno delle dimensioni della finestra e delle proporzioni dell'immagine. Tali proporzioni si ottengono dividendo la larghezza per l'altezza:
$(function() {
var $window = $(window),
$bg = $('#bg', document.body),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( ($window.width() / $window.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
$window.resize(function() {
resizeBg();
}).trigger('resize');
});
Il test รจ semplice: se le proporzioni della finestra del browser sono inferiori a quelle dell'immagine, allora l'immagine va estesa in altezza, altrimenti in larghezza. La funzione resizeBg() viene usata ogni qual volta la finestra viene ridimensionata. Per rendere effettive le modifiche, l'evento resize viene richiamato esplicitamente con il metodo trigger().
Potete visionare l'esempio finale in questa pagina.