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.