En CSS3 existen un par de propiedades que tienen que ver con cómo se colocan las imágenes de fondo en elemento HTML y que suelen provocar bastantes dudas entre los programadores cuando se las encuentran por primera vez. Se trata de las propiedades background-origin y background-clip. A continuación voy a explicarlas con un ejemplo que creo que las dejará totalmente claras.

La propiedad background-origin se utiliza para determinar a partir de dónde se calcula la posición del fondo de un elemento (combinada con la propiedad background-position). Los valores que puede tomar esta propiedad son:

  • border-box: la posición se empieza a medir desde el borde. Es la opción por defecto si no especificas nada.
  • padding-box: la posición se empieza a medir desde donde empieza el relleno, es decir, no se cuentan los bordes.
  • content-box: la posición se empieza a medir desde donde empieza el contenido, o sea, después del paddding que tenga aplicado el elemento.

Sin embargo la propiedad background-clip indica qué parte de la caja del elemento ocupa la imagen de fondo. Los valores son los mismos que la propiedad anterior.

Dado que su funcionalidad es parecida y los valores que toman son los mismos, causan mucha confusión. Además, en elementos sin borde o sinrelleno, o con valores muy pequeños para éstos, es muy difícil apreciar el efecto de ambas propiedades.

Así que la mejor forma de ver cómo funcionan es con algunos ejemplos prácticos...

Supongamos que tenemos un elemento de tipo <div>, cuadrado, como este:

<div id="fondo" class="clip"></div>

al que le queremos poner la siguiente imagen de fondo:

para lo cual le aplicamos estas reglas CSS (le he puesto un borde y un relleno (padding) bastante grandes para que se note más el efecto):

#fondo {
background: url(yin.jpg) 0 0 no-repeat;
width: 200px;
height: 200px;
border: 20px solid red;
padding: 50px;
}

Como la caja del div es mucho menor que el tamaño de la imagen (la suma de su tamaño + el relleno + los bordes 200+50*2+20*2 = 340 píxeles, porque dejamos el border-sizing por defecto), lo que veremos en este caso es que la imagen de fondo se corta, y con los valores por defecto se verá algo así:

y que la imagen se coloca desde dentro del borde y se ve a partir de ahí.

Podemos ver dónde está posicionada si muestro las dimensiones de cada elemento de la caja del div superpuesto para que se vea:

Teniendo en cuenta esto, si le aplicamos el siguiente selector y estilos en lo que respecta a las propiedades de las que estamos hablando:

#fondo.clip{
background-origin: border-box;
background-clip: content-box;
}

Ahora la imagen está colocada con su extremo superior izquierdo pegado a esos mismos bordes (arriba y a la izquierda, por el background-origin:border-box), pero no se comienza a ver hasta la zona del contenido (background-clip: content-box), así:

Fíjate en la imagen anterior con las dimensiones superpuestas: lo que está ocurriendo aquí es que el borde superior y el izquierdo de la imagen de fondo se pega al exterior del borde de la caja del elemento, es decir, al extremo más alejado de ésta que es la parte exterior del borde. O sea, frente a los valores por defecto lai magen se desplaza a la izquierda y arriba. Además como en el clipping hemos especificado que solo se debe ver a partir del contenido, todo el relleno (en este caso de 50 píxeles, tapa el fondo del div, y por eso aparece la imagen más cortada todavía.

Sin embargo si ahora lo cambiamos para que el clipping no afecte a la zona de relleno:

#fondo.clip{
background-origin: border-box;
background-clip: padding-box;
}

veremos esto otro:

Finalmente, si abarcamos también el borde con el clipping, de entrada no notaremos la diferencia con lo anterior salvo que el borde sea semi-transparente o use puntos o rayas, pues el borde sólido queda siempre por encima. Por ejemplo, poniendo el borde con un 50% de transparencia usando rgba, y colocando el clipping como border-box, veríamos esto:

Donde ya observamos que la imagen de fondo se posiciona totalmente contra el extremo exterior de los bordes y se ve completa porque hemos hecho que el borde sea semitransparente.

Una forma bueno de verlo es que te descargues el archivo de ejemplo y varíes los valores de estas dos propiedades usando las herramientas del desarrollador, algo así (pulsa para verla en grande):

En este gif animado puedes observar el efecto que hace cada uno de los posibles valores de las propiedades sobre cómo se posiciona y se ve el fondo, y cuáles son sus valores por defecto (al desactivarlos).

¡Espero que te resulte útil!

💪🏻 ¿Este post te ha ayudado?, ¿has aprendido algo nuevo?
Pues NO te pido que me invites a un café... Te pido algo más fácil y mucho mejor

Escrito por un humano, no por una IA