CSS: Perfecta imagen de fondo página completa

Hace un tiempito decidí cambiar el theme de mi web por uno más acorde a las fechas que se nos aproximan: Navidad y año nuevo. Empiezo a jugar con Photoshop y termino en una idea que me gustó bastante y era momento de empezar a recortar elementos y ubicarlos en HTML y CSS… hasta acá todo lindo. La duda existencial se me plantea cuando comienzo a trabajar con la imagen de fondo: ¿Podré utilizar una imagen de fondo que ocupe toda la pantalla sin dejarme espacios en blanco? Probando posicionamientos con varias imágenes en CSS y demás, concluyo en buscar por internet la solución y caigo con la magia de “background-size”

El uso es sencillo y derecho a lo que nos interesa:

[css]
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}[/css]

No hay mucho para explicar, éste código, así como lo ven, está preparado para trabajar en:

  • Safari 3+
  • Chrome
  • IE 9+
  • Opera 10+
  • Firefox 3.6+

Y algunas de las ventajas:

  • Llena la página con la imagen, sin espacios en blanco,
  • Escala la imagen sin importar el monitor,
  • Mantiene las proporciones de la imagen,
  • La imagen se centra,
  • No produce las barras de desplazamiento.

Una técnica ultra sencilla y de la mano de puro código CSS.

A mí me sirvió y es la técnica que actualmente utilizo en mi plantilla.

Deja tus comentarios!