soy Kseso y esto EsCSS

El fondo a fondo. Novedades Css3 en la propiedad background

El fondo a fondo. Novedades Css3 en la propiedad background

·Por Kseso ✎ 5
Origen img: Rafael Castillejo

Un acercamiento a las novedades sobre la propiedad background recogidas en los últimos documentos del consorcio sobre los fondos.

Posíblemente la más llamativa y soportada sea la posibilidad de utilizar múltiples imágenes en la misma declaración. Pero no es la única.

Background-repeat aumenta sus valores con "space" y "round", B-attachment con "local" y el soporte de gradientes css en B-image.

Y añade alguna propiedad nueva al grupo como "background-clip", "background-origin", "background-size".

Ésta última, B-size, la hemos nombrado en el blog, en un uso práctico: fondo al 100%.

Documento de referencia y base de este artículo:
"CSS Backgrounds and Borders Module Level 3" status: Editor's Draft 11 Abril 2012 (trabajo en progreso) W3C Candidate Recommendation 17 Abril 2012

Background-image: múltiples imágenes

En la propiedad "Background-image" es posible declarar múltiples archivos de imágenes. Su sintaxis es separar cada url con una coma (,).
Cada una de las imágenes admite valores independientes en el resto de propiedades: position, repeat, attachment...

.ejemplo-backg-img { background-image: url(Firefox.png), url(Google_chrome.png), url(Opera.png); background-position: -20px 10px, 50% 50%, bottom right; background-repeat: repeat-x, no-repeat, repeat; }

Dos curiosidades que posíblemente ya conozcas:
⇨ el orden de apilamiento (z-index) lo marca su aparición en la declaración. Más alto la primera que se declara, después la segunda, y así sucesivamente.
⇨ La posición declarada en un fondo repetido se toma como punto para colocar la primera imagen, y en torno a ella realizar la repetición.
⇨ Y sí, en las repeticiones también son válidos los valores negativos.

Gracias a esta nueva posibilidad de los fondos múltiples se consiguen realizaciones tan imaginativas y vistosas como la técnica "The Cicada Principle". No dejes de ver los ejemplos conseguidos con ella.

Background-repeat

Es la propiedad que define si la imagen se repite (y en qué ejes) o no para rellenar a todo el elemento. Css2.1 no proveía herramientas para mostrar la imagen sin recortes en los laterales. Para ello, el documento del W3c añade los valores:

Round y scale

Con estos valores se evita que la imagen sufra recortes al completar el relleno del fondo. La imagen es distribuida para evitar que en los laterales se muestre sólo una parte de ella. O bien se reescala o bien se redistribuye cada copia (dejando espacios entre ellas) para cubrir la totalidad del elemento con un número entero de imágenes.
Si bien algunas páginas indican que ya son soportados estos valores, no he podido hacerlos funcionar en ff-11 y chrome 18

Background-attachment

>Esta propiedad controla el comportamiento de la imagen de fondo al desplazar el elemento que la contiene. Los valores en Css2.1 son
fixed: similar al mismo valor de position, pero su referente es el elemento (no la ventana) mientras éste está visible. Al hacer scroll en el elemento se mantiene fija pero se desplaza con el scroll de la ventana.

Esta propiedad controla el comportamiento de la imagen de fondo al desplazar el elemento que la contiene. Los valores en Css2.1 son
fixed: similar al mismo valor de position, pero su referente es el elemento (no la ventana) mientras éste está visible. Al hacer scroll en el elemento se mantiene fija pero se desplaza con el scroll de la ventana. Mira el ejemplo.
scroll: se desplaza junto con el elemento.

Background-attachment: local

El fondo se posiciona fijo respecto a los contenidos de la caja.

Puedes ver un ejemplo de cómo se comportan los distintos valores de Background-attachment realizado por Lea Verou aquí.

Background-clip

Determina qué parte cubre el fondo. El valor por defecto es border-box, que a su vez es el comportamiento que hasta ahora tenía background.

Border-box
Background-clip: Border-box

El borde (border) queda incluido en el área cubierta por el background, así como el padding y la superficie que ocupa el contenido

Padding-box
Background-clip: Padding-box

Se excluye el borde de la caja de la zona que cubre el fondo.

Content-box
Background-clip: Content-box

El fondo se dibuja en la superficie ocupada con el contenido. Border y padding no se cubre.

Background-origin

Indica qué elemento (border, padding o el contenido) es el referente para background-position en elementos renderizados como una sola caja. En los presentados como de línea en varias líneas o en varias páginas cuál de ella.
Ver box-decoration-break

Background-position: 0 0; Background-clip: Border-box; Background-origin: Padding-box
Padding-box

Es el valor por defecto de esta propiedad. El referente es el padding. En los cuadros individuales '0 0' es la esquina superior izquierda del límite del padding, '100% 100%' es la esquina inferior derecha, no de la caja (border) sino del padding.

>clip & position iguales; Background-origin: border-box
Border-box

Idem del anterior pero el referente es el borde

Content-box
clip & position iguales; Background-origin: content-box

Sí, acertaste. El contenido, o el interior del padding.

Background-size

Background-position: 0 0; Background-clip: Border-box; Background-origin: Padding-box; Background-size: 150px 100%;

Especifica el tamaño de la imagen (imágenes) usada en el background.
El primer valor da la anchura de la imagen correspondiente, el segundo valor su altura. Si sólo se define un valor el segundo se supone que es "auto".
Los valores pueden ser definidos en unidades de porcentaje (%) que serán relativas al tamaño de la superficie, en cualquier unidad de tamaños permitidas en Css (em, rem, px, pt...)

Contain
Mismos valores anteriores. Background-size:contain;

Escala la imagen, sin deformarla (sin alterar su relación ancho/alto), para cubrir al menos un eje de la caja (X o Y) con una sola copia de la imagen. Esto es, muestra una copia completa de la imagen sin deformarla ni recortarla, cubriendo en la totalidad una de las dos dimensiones de la caja, dejando espacio sin cubrir si no coinciden las relaciones alto/ancho de ambos, imagen y caja.

cover
Mismos valores anteriores. Background-size: cover; background-position: 50% 50%;

El valor "cover" escala la imagen sin deformarla para cubrir la totalidad de la caja, recortando si es necesario la parte sobrante. Para mostrar la parte de la imagen que interese se utiliza con background-position.
Este es el valor indicado para cubrir todo el elemento con una sola imagen sin importar la relación de tamaños entre caja y fondo.

Box-decoration-break

Al mencionar la propiedad barckground-origin se diferenciaba entre elementos renderizados en una sola caja o en varias. Los ejemplos y explicación los mostré en una sola.
Cuando un elemento al ser computado da como resultado varias cajas generadas, esta propiedad box-decoration-break permite controlar cómo se muestra no sólo el fondo el fondo sino también otras propiedades como box-shadow, border-radius y border-image. Hay dos posiblidades y por lo tanto dos valores para esta propiedad:

Clone

Cada caja generada es tratada como una entidad independiente y a cada una de ellas se le aplican los valores de las propiedades. Ver la parte derecha de la imagen inferior.

Slice

La totalidad de las cajas generadas se tratan como una sola. Por lo tanto el fondo se prolonga de una a otra, no se producen sombras en los lados adyacentes, tampoco bordes, etc. Corresponde a la parte izquiera de la imagen de abajo.

imagen ilustrativa de Box-decoration-break

Final

Este documento también recoge las especificaciones propuestas para otras propiedades complementarias como box-shadow, en el enlace tienes una explicación completa de ella. Así como lo referente a los bordes (imágenes y radios).

Prueba a jugar un poco con estas propiedades y a experimentar combinando los distintos valores de cada una de ella. Obtendrás curiosidades y sorpresas a la vez que las irás controlando.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso