jQuery: immagini di sfondo a tutto schermo

jQuery: immagini di sfondo a tutto schermo

jQuery ci permette di realizzare l'effetto delle immagini di sfondo a tutto schermo che si adattano alla dimensione della finestra del browser. In questo articolo vedremo come realizzare questo effetto.

Partiamo da questa marcatura:


<body>
<div id="overlay">
	<img src="base.jpg" alt="" id="base" />
</div>
</body>

Nel CSS useremo il posizionamento fisso per fare in modo che l'immagine sia sempre centrata nella finestra:


html, body {
	height: 100%;
	min-height: 100%;
}
	
	

#overlay {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
}
	
#base {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
}

Con jQuery dobbiamo solo calcolare il rapporto esistente tra le dimensioni della finestra e le dimensioni della nostra immagine:


$(function() {

	var bgImage = $('#base');     
 
    function resizeImg() {
      	   var imgwidth = bgImage.width(),
           imgheight = bgImage.height(),
           winwidth = $(window).width(),
           winheight = $(window).height(),
           widthratio = winwidth / imgwidth,
           heightratio = winheight / imgheight,
           widthdiff = heightratio * imgwidth,
           heightdiff = widthratio * imgheight;
 
      if(heightdiff>winheight) {
        bgImage.css({
          width: winwidth+'px',
          height: heightdiff+'px'
        });
      } else {
        bgImage.css({
          width: widthdiff+'px',
          height: winheight+'px'
        });
      }
 
 
    }
    resizeImg();
    
    $(window).resize(function() {
      resizeImg();
    });
    
});

Potete visionare l'esempio finale in questa pagina.

Torna su