La propiedad background-size

Aprovechemos la salida Firefox 3.6 para experimentar un poco con las nuevas extensiones que se corresponden con algunas de las directivas para el futuro CSS3 y que lentamente van siendo agregadas a los navegadores a excepción de Intenet Explorer.

Una de ellas es la que permite hacer algo que muchos preguntan y alguna vez hubo una entrada al respecto: Redimensionar la imagen de fondo.

Esta alternativa está contemplada en los borradores de la w3org y la propiedad tendría el nombre genérico de background-size pero, los navegadores utilizan nombres distintos:

-moz-background-size en Firefox 3.6
-o-background-size en Opera 9.5
-webkit-background-size en Google Chrome y Safari
-khtml-background-size Konqueror 3.5.4

Nos permite establecer la dimensión de la imagen a usar como fondo y admite dos valores, el ancho y el alto, tanto en pixeles como en porcentajes. Eventualmente, hay otros valores que podemos usar como auto, contain y cover que establecen la relación ancho/alto a mantener.

Mucho blablabla. Vamos a los ejemplos para que se vea con claridad.

Usaremos una imagen que tiene tiene 200x158 pixeles y la aplicaremos como fondo a un DIV al que le daremeos una dimensión de 300x300. Agregado el estilo, podríamos tener este código:

<div style="background: #000 url(URL_imagen) no-repeat left top; height: 300px;  width: 300px;"></div>

y veríamos esto:

Como la imagen de fondo es pequeña, por defecto, no alcanza a cubrir el total del rectángulo así que, le agregaremos la nueva propiedad con valores de 100% tanto para el ancho como para el alto:

-moz-background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%;

Y veríamos esto:

Ahora, hagamos lo mismo pero, con valores del 50% para el ancho en un caso y para el alto en el otro:

-moz-background-size: 100% 50%; -o-background-size: 100% 50%; -webkit-background-size: 100% 50%;

-moz-background-size: 50% 100%; -o-background-size: 50% 100%; -webkit-background-size: 50% 100%;

Este sería el resultado:

¿Y que hacen contain y cover? Los definimos así:

/* el rectángulo de la izquierda */
-moz-background-size: contain;

/* el rectángulo de la derecha */
-moz-background-size: cover;

Y veríamos esto en Firefox solamente porque al parecer, esos valores aún no son soportados correctamente por los otros navegadores.