Blog sobre Accesibilidad Web, diseño Web, SEO y recursos gratis en la Web

jueves, 5 de febrero de 2009

Un background siempre a pantalla completa

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
Share:

Publicidad

Estadísticas

A cotidiano, me siguen