Introducción a las propiedades de los fondos en CSS3

La semana pasada hablábamos sobre fondos con degradados en CSS3. Esta semana continuamos la serie de introducción a CSS3 hablando de los backgrounds o fondos. Varios han sido los cambios introducidos a los mismos y el módulo de la nueva especificación relativo a ellos es ya un CR (Candidate Release) por lo que la práctica mayoría de navegadores modernos los soportan, incluyendo IE9.

Uno de los cambios que mas hype han generado, es la posibilidad que nos ofrece CSS3 de crear diferentes capas para nuestros fondos y poder de esa manera generar complejas composiciones e incluso animaciones con las nuevas propiedades de transición de CSS3 (de las que ya hablaré en su día) o con scripts JavaScript.

Pero no es solo ese el único cambio que trae consigo CSS3 para los fondos. También se incorporan otras propiedades para fijar el tamaño, la posición o el origen de nuestros fondos. En las próximas líneas hablaremos sobre todas ellas en esta nueva introducción a las propiedades de los fondos en CSS3.

Size

Una de las nuevas propiedades introducidas es la capacidad de especificar el ancho y alto de los fondos. Este tamaño puede ser expresado en píxeles, ancho y alto, o en porcentajes. Si se define en porcentaje, entonces este es relativo al ancho o alto del área que se haya señalado para ser usada con background-origin

También es posible especificar el tamaño a través de tres palabras clave:

• contain, escala la imagen preservando sus proporciones intrínsecas, hacia el lado de mayor tamaño al que pueda crecer dentro del área de posición del fondo

• cover, escala la imagen preservando sus proporciones intrínsecas hacia el lado de menor tamaño al que pueda disminuir del área de posición del fondo

• auto, dependiendo del contexto esta palabra clave tiene diferentes resultados. Si se usa auto para una de las dimensiones, se resolverá usando las proporciones y tamaño del otro lado o usando las dimensiones intrínsecas de la imagen. Si los dos lados tienen un valor auto entonces se usará el valor intrínseco de ancho o alto si la imagen los tuviera

background-size: 210px  80px;

Origin

Un sueño dentro de un sueño... ahora en serio. Fija la posición del fondo relativa al borde, padding o contenido del elemento. Puede tomar tres valores diferentes:

• border-box, la posición es relativa a la esquina superior izquierda del limite exterior

• padding-box, la posición es relativa a la esquina superior izquierda del borde si lo hubiera

• content-box, la posición es relativa a la esquina superior izquierda del contenido

Hay que tener en cuenta que las versiones propietarias de esta propiedad de mozilla y webkit usan una sintaxis no stándar donde no se incluye el sufijo box. Por ejemplo: -moz-background-origin: border;:

#elemento {
    /* Webkit y mozilla no estandard */
    -moz-background-origin: border;
    -webkit-background-origin: border;
    /* estandar */
    background-origin: border-box;
}

Clip

Determina si un fondo se extiende hasta los bordes o no. Puede definir los mismos valores que la propiedad anterior. El valor por defecto es border-box lo que significa el el fondo se extiende dentro de él, pero si lo fijamos padding-box no lo hará. Si lo fijamos a content-box solo se extenderá al contenido del elemento.

A esta propiedad le ocurre lo mismo con las sintaxis propietarias de mozilla y webkit:

#elemento {
    /* Webkit y mozilla no estandard */
    -moz-background-clip: border;
    -webkit-background-clip: border;
    /* estandar */
    background-clip: border-box;
}

Se pueden hacer cosas muy curiosas con esta propiedad, como por ejemplo cajas flotantes con bordes transparentes.

Fondos múltiples

Esta es posiblemente la modificación más atractiva en lo que a fondos se refiere. Nos permite especificar fondos múltiples separados en capas usando una simple lista de fondos y propiedades separados por coma. El primer valor que aparece en la lista se corresponde a la capa más alta de la composición, el último valor a la más baja. Por lo tanto el fondo iría al final y los elementos más elevados al principio de la definición.

Esto abre la puerta a una serie de oportunidades sin límite donde podremos crear composiciones complejas sin necesidad de añadir multitud de elementos div que lo único que hacen es albergar una imagen de fondo tal y como nos veíamos obligados a hacer anteriormente. La forma de utilizar esta nueva feature es muy sencilla:

Paisaje con Domo

Conclusión

Las nuevas propiedades y posibilidades que CSS3 nos ofrece con respecto a los fondos son realmente potentes y sencillas de utilizar. Os invito a experimentar con ellas y añadir vuestros resultados en los comentarios. Hasta la próxima.

Más en Genbeta Dev | Introducción a CSS3