Un background siempre a pantalla completa

Supersized es un script en JQuery que hace las cosas muy fáciles ante la eterna pregunta ¿cómo diseño el layout para una imagen de fondo que se adapte a cualquier resolución?

La respuesta:

Supersized

Ventajas del uso del script

• Redimensiona cualquier imagen de fondo en el body para que, manteniendo sus proporciones, la misma ocupe el ancho de la ventana.
• No necesita un marcado extra, no hay barras de desplazamiento.
• Compatible con Firefox, Safari, Opera, IE7, and IE6.
• Adicionalmente, se puede trabajar el fondo como un slideshow cíclico.

No existen muchas consideraciones, pero sí algunas en cuanto al HTML y el CSS a utilizar.

Código HTML

<div id="supersize">
     <img class="activeslide" src="http://www.example.com/picture.jpg" />
     <a href="http://www.example.com/><img src="http://www.example.com/imagen.jpg" /></a>
</div>

Código CSS

body {
     overflow:hidden;
}
#supersize img, #supersize a{
 height:100%;
 width:100%;
 display:none;
}
#supersize .activeslide, #supersize .activeslide img{
 display:inline;
}

Ver | demo
Visto en | Build Internet