Niquelao

Más sobre CSS 3: background-origin y background-clip 13 de Diciembre de 2009, por Rumoroso

Continuando con el repaso a las diferentes propiedades de CSS 3 que controlarán nuestros fondos, ahora les toca turno a background-origin y background-clip. Estas dos propiedades vienen para ayudarnos a controlar tanto el origen respecto al cual posicionaremos las imágenes de fondo, como la posibilidad de mostrarlas por debajo del borde.

background-origin

Determina el origen a partir de donde se calcula posición del fondo, es decir, el origen de coordenadas para la propiedad background-position. Sus posibles valores son:

• border-box: la posición del fondo se determina respecto al área que incluye el borde (traducido significa que si el borde es discontinuo, el fondo se podrá llegar a ver por debajo de él).
• padding-box: es el valor por defecto y determina la posición del fondo respecto al área que incluye el padding (equivalente a la actual en CSS 2.1).
• content-box: el fondo se posiciona respecto al área de contenido.

background-clip

Determina el área en el que se mostrará el fondo y admite dos posibles valores:

• border-box: es el valor por defecto e incluye el fondo en el área ocupada por el borde.
• padding-box: limita el área en la que se mostrará el fondo a la ocupada por el padding y el contenido, es decir, aunque el origen del fondo esté en el borde, no se mostrará la imagen por debajo de este.

La explicación

Como siempre, lo mejor es acudir a los ejemplos en forma de capturas para explicar ambas propiedades. En ellos he simulado el espacio ocupado por un elemento (respetando el modelo de cajas), es decir, borde (punteado gris grueso), padding (espacio entre el borde y la delgada línea discontinua) y contenido (delimitado por la línea discontinua). Empecemos:

¿Cuál es la diferencia entre el siguiente par de imágenes?

Resulta evidente que la diferencia entre ambas está en que en una se muestra el fondo por debajo del borde, mientras que en la otra no. La CSS de la primera es:

background-origin: border-box;
background-clip: border-box;

…y para la segunda:

background-origin: border-box;
background-clip: padding-box;

Y ahora, ¿entre las siguientes imágenes?

Ahora la diferencia está en el origen del fondo. En la primera, el origen incluye el borde:

background-origin: border-box;

…mientras que en la segunda estaría en el padding:

background-origin: padding-box;

Finalmente, ¿cuál es la diferencia ahora?:

Nuevamente está claro. La primera imagen, al igual que la primera en el par de ejemplos anteriores, tiene como origen del fondo el área del borde, mientras que la segunda tiene dicho origen en el área de contenido:

background-origin: border-box;

y

background-origin: content-box;

Si tu navegador es una versión reciente de Firefox, Chrome, Safari o Konqueror, puedes acceder a la página con un ejemplo de aplicación de ambas propiedades. Si utilizas algún otro (por ejemplo, Internet Explorer u Opera) también puedes acceder al ejemplo, aunque en este caso será para ver el resultado cuando no se soportan estas propiedades.

nota: Mozilla y WebKit soportan estas propiedades de forma experimental con sus sintaxis particulares.

Como ya expliqué en otro artículo, con CSS 3 podremos incluir más de una imagen de fondo. Las propiedades background-origin y background-clip admiten la inclusión de un valor para cada una de las imágenes que se utilicen.

Para terminar, nuevamente comentaré algo respecto a la imagen empleada de fondo en los ejemplos. Es una deliciosa tarta de frutas que hizo Dolores y que me gané por bueno… vale, que me gané a secas… bueno, no me la gané, pero la disfruté como un niño

Más sobre CSS 3: background-origin y background-clip

Categoría: CSS

Puedes hacer un seguimiento de los comentarios gracias al feed RSS 2.0. También puedes enviar un trackback desde tu sitio.

• Artículo anterior: Fish eye menu only with CSS Transform and Transition