Expandir el fondo del blog con CSS3

El atributo "background-size" nos permite establecer el tamaño del fondo de algún elemento. Si bien es posible establecer tamaños en píxeles, también es posible asignarle el valor "cover", el cual permite que se adapte al contenedor, elemento al que se le haya asignado y sin dejar ningún espacio en blanco.


Puedes comprobar el resultado del tutorial observando este ejemplo (Redimensiona la ventana para comprobar su efectividad).


Este efecto es bastante útil si usamos imágenes y no queremos que queden espacios vacíos. La ventaja de usar "cover", es que no estira ni deforma la imagen cuando no es necesario, sino cuando hayan espacios que rellenar.

Para aplicarlo, basta con hacerlo mediante la siguiente síntaxis:

background-size: cover;

Esta síntaxis está en su versión genérica, pero podemos añadir además su versión para los navegadores Webkit, Firefox y Opera de la siguiente forma:

-webkit-background-size: cover; /*Para Chrome, Safari*/
-moz-background-size: cover; /*Para Mozilla Firefox*/
-o-background-size: cover; /*Para Opera*/
background-size: cover; /*Elemento genérico*/

Es importante saber que para que este fondo se aplique correctamente es necesario centrarlo y aplicarle el valor "fixed", el cual se encarga de mantener estática la imagen al momento de hacer scroll:

background: url(URL-IMAGEN) no-repeat center center fixed;

Entonces, si ya tenemos una imagen que deseamos que se sitúe de imagen de fondo del blog, y además queremos que esta se adapte a la página, debemos hacerlo mediante el siguiente código:

body {
background: url(URL-IMAGEN) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Este código deberá ir antes de:

]]></b:skin>

Importante: Recuerda que es necesario usar imágenes en alta calidad, ya que en monitores demasiado grandes la imagen se pixelará.