La propiedad background-size
La propiedad background-size nos permite redimensionar las imágenes de fondo. El valor de la propiedad background-size puede ser una palabra clave o el tamaño de la imagen redimensionada.
Palabras clave ( contain o cover )
El valor de background-size puede ser una de estas palabras clave: contain o cover.
Si background-size: contain: la caja contiene la imagen. La imagen aparece integralmente en la caja y es redimensionada proporcionalmente, al tamaño máximo: o bien es tan alta como la caja, o es tan ancha como la caja.
#contain{background-size:contain;}
.bgsize{
width:300px;
height:200px;
border:1px solid black;
background-image:url(images/flores.jpg);}Si background-size: cover: la imagen es redimensionada proporcionalmente y cubre toda la caja. Parte de la imagen puede no aparecer en pantalla.
#cover{background-size:cover;}
.bgsize{
width:300px;
height:200px;
border:1px solid black;
background-image:url(images/flores.jpg);}Dimensiones
Si no utilizamos una de estas palabras clave tenemos que indicar el tamaño de la imagen redimensionada. En este caso la sintaxis de la propiedad background-size es la siguiente:
background-size: tamañoX[ tamañoY];
El segundo valor de background-size es opcional, y si no está especificado la imagen será redimensionada proporcionalmente.
#unSoloParametro{background-size:100px;}
.bgsize{
width:300px;
height:200px;
border:1px solid black;
background-image:url(images/flores.jpg);}Los parámetros tamañoX y tamañoY pueden ser valores numéricos positivos expresados en px, en em en porcentajes ( % ) o en otras unidades aceptables en el CSS. Especificar los dos parámetros a la vez nos permite deformar la imagen.
#pixeles{background-size:150px 80px;}
.bgsize{
width:300px;
height:200px;
border:1px solid black;
background-image:url(images/flores.jpg);}La palabra clave auto
Los parámetros tamañoX y tamañoY también pueden tomar como valor la palabra auto. La palabra clave auto: redimensiona la imagen guardando las proporciones. Si tanto el valor de tamañoX como el de tamañoY son auto, la imagen conserva su tamaño inicial. Este es el valor por defecto.
Si solo uno de los dos parámetros es auto, el CSS calcula su valor por tal de guardar las proporciones.
#auto{background-size:150px auto;}
.bgsize{
width:300px;
height:200px;
border:1px solid black;
background-image:url(images/flores.jpg);}