Background FullScreen

por

Con los nuevos diseños "responsivos" se está haciendo necesario cada vez más el colocar imágenes de fondo a pantalla completa y que estas se redimensiones según el tamaño de ventana.

Como desde este blog no queremos ser menos he creado un script en jQuery que nos permite realizar esta tarea de una manera muy simple. Para ello necesitaremso los siguientes códigos:

JS

<script type="text/javascript">
	function fullScreen(){
		 var img = $('#background-image img');
		 var imgHeight = img.height();
		 var imgWidth = img.width();
	 
		 var widthParent = img.parent().width();
		 var heightParent = img.parent().height();
	 
	 
		 if($(window).height() > imgHeight){
			 imgHeight = $(window).height() +'px';
			 imgWidth = 'auto';
		 }
	 
		 else if($(window).width() > imgWidth){
			 imgHeight = 'auto';
			 imgWidth = '100%';
		 }
	 
		 else if($(window).width() < imgWidth) {
	 
			 if($(window).height() < imgHeight){
				 imgHeight = $(window).height();
				 imgWidth = 'auto';
			 }
		 }
	 
		 else if($(window).height() < imgHeight) {
				 imgHeight = 'auto';
				 imgWidth = '100%';
		 }
		 img.css({'height':imgHeight,'width':imgWidth});
	 
	}
	
	$(window).load(function(){
		fullscreen();
	});
	
	$(window).resize(function(){
		fullscreen();
	});

</script>

CSS

#wrapper{min-width:980px;width:100%;float:left;z-index:2;}
#background-image{min-width:980px;height: 100%;left: 0;overflow: 
hidden;position: fixed;top: 0;width: 100%; z-index: 1;}
#background-image img{display:block;width:100%;min-width:980px;height:100%;}
#background-image + #wrapper{position:relative;}

HTML

<head>

	<script src="ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
	
</head>
<body>
	 <div id="background-image">
		 <img src="../images/miimagen.jpg" title="" alt=""/>
	 </div>

	 <div id="wrapper">


	 </div>
 
</body>

Como véis es un código muy fácil de implementar. No os olvidéis de incluir la librería jQuery para que todo funcione correctamente.

Os recomiendo utilizar una imagen con una resolución alta para no ver como se pixela la imagen al crecer en pantallas grandes.

Espero que os guste.

COMENTARIOS

DEJA TU COMENTARIO