Si usas una imagen de fondo en alguna ocasión te habrás visto en la necesidad de usar una que se adapte al tamaño del elemento contenedor. La propiedad CSS3 background-size permite definir el tamaño de esta imagen, ya sea en píxeles o con un porcentaje relativo al tamaño del contenedor. Se definen dos parámetros para el tamaño: el primero es el alto y el segundo el ancho.

/*Este daría un alto de 250px y un ancho de 50*/
background-size:250px 50px; 
/*Este cubriría todo el contenedor*/
background-size:100% 100%;

Como os podéis imaginar, si andáis modificando tamaños la imagen se deformará al romperse la proporción de las medidas.

Existen además de estas medidas dos propiedades que podéis aplicar: cover y contain.

• Contain: Esta propiedad escala la imagen de forma que mantenga las proporciones y ocupa o el alto o el ancho (dependiendo de la proporción)
• Cover:Esta propiedad escala la imagen al mínimo tamaño, manteniendo también las proporciones, para que ocupe todo el contenedor. Es posible que esto provoque que parte de la imagen no se vea.

background-size:contain; 
background-size:cover;

Y ahora vamos con el problema (con el que me vi esta tarde): hemos acabado de maquetar, probamos en todos los navegadores y funciona. Entonces en Explorer empezamos con los modos de compatibilidad, y sin problemas en Explorer 10 y 9 pero, al llegar al 8, todo a tomar por culo… tras maldecir a Bill Gates, a Windows, al Explorer y compartir mis cuitas con los compañeros de curro toca buscar una solución… y aparece en StackOverflow, como no.

Con lo que basándome en eso, dejo el css como está, con su background-size que está furrulando en todos los navegadores (menos en Explorer 8 y previos) y en el marcado html modifico el div con el siguiente código, para que así la imagen ocupe todo el contenido:

<div style='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.gif',sizingMethod='scale');-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.gif',sizingMethod='scale')";'></div>

En fin, hasta que no queden eliminados todos los IE8 habrá que recurrir a este truquito para hacer funcionar esto. Conste que no soy partidario de usar imágenes de fondo, la verdad.