jQuery: immagini di sfondo a tutta pagina

  • 03-12-2011
  • jQuery
  • Short link

Un semplice metodo per avere sempre le immagini di sfondo a tutta pagina con jQuery.

1 anno fa

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.

Commenti

Potete commentare questo articolo utilizzando la mia pagina di Facebook o il mio account Twitter. Questo permetterà alla discussione di coinvolgere molte più persone.