La Propiedad BACKGROUND-ORIGIN

La propiedad background-origin en CSS establece el origen del sistema de coordenadas para la propiedad background-position.

La propiedad background-origin en CSS establece el origen del sistema de coordenadas para la propiedad background-position. En otras palabras, define desde qué borde de la caja del elemento se debe comenzar a posicionar la imagen de fondo.

Sintaxis Básica

La sintaxis básica para usar la propiedad background-origin es la siguiente:

CSS
 
selector {
  background-origin: valor;
}

Donde selector es el elemento HTML al que quieres aplicar el origen del fondo y valor puede ser uno de los siguientes:

Valores de la Propiedad background-origin

La propiedad background-origin puede tomar los siguientes valores:

1. padding-box

Este es el valor predeterminado. La imagen de fondo se posiciona relativa a la esquina superior izquierda del área de relleno (padding box) del elemento. Esto significa que el punto de origen (0, 0) para la propiedad background-position se encuentra en la esquina superior izquierda del padding.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 10px solid black;
    background-image: url('https://via.placeholder.com/50');
    background-repeat: no-repeat;
    background-position: top left; /* Posiciona la imagen en la esquina superior izquierda del origen */
    background-origin: padding-box; /* El origen es el padding (por defecto) */
  }
</style>
</head>
<body>

  <div class="elemento">Este div tiene un padding y un borde. El origen del fondo es el padding (por defecto).</div>

</body>
</html>

En este ejemplo, la imagen de 50x50 píxeles se posicionará en la esquina superior izquierda del área de relleno (20px desde el borde superior y 20px desde el borde izquierdo).

2. border-box

La imagen de fondo se posiciona relativa a la esquina superior izquierda del área del borde (border box) del elemento. El punto de origen (0, 0) para background-position se encuentra en la esquina superior izquierda del borde exterior.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 10px solid black;
    background-image: url('https://via.placeholder.com/50');
    background-repeat: no-repeat;
    background-position: top left; /* Posiciona la imagen en la esquina superior izquierda del origen */
    background-origin: border-box; /* El origen es el borde */
  }
</style>
</head>
<body>

  <div class="elemento">Este div tiene un padding y un borde. El origen del fondo es el borde.</div>

</body>
</html>

Aquí, la misma imagen de 50x50 píxeles se posicionará en la esquina superior izquierda del borde exterior del elemento.

3. content-box

La imagen de fondo se posiciona relativa a la esquina superior izquierda del área de contenido (content box) del elemento. El punto de origen (0, 0) para background-position se encuentra en la esquina superior izquierda del área donde se muestra el contenido (sin incluir el padding ni el borde).

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 10px solid black;
    background-image: url('https://via.placeholder.com/50');
    background-repeat: no-repeat;
    background-position: top left; /* Posiciona la imagen en la esquina superior izquierda del origen */
    background-origin: content-box; /* El origen es el contenido */
  }
</style>
</head>
<body>

  <div class="elemento">Este div tiene un padding y un borde. El origen del fondo es el contenido.</div>

</body>
</html>

En este caso, la imagen de 50x50 píxeles se posicionará en la esquina superior izquierda del área de contenido (después del padding y el borde).

Ejemplo Comparativo

Para ver mejor la diferencia, consideremos un ejemplo con un desplazamiento en la posición de la imagen:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 10px solid black;
    background-image: url('https://via.placeholder.com/50');
    background-repeat: no-repeat;
    background-position: 10px 10px; /* Desplaza la imagen 10px desde el origen */
    margin-bottom: 20px;
  }

  .padding-origin {
    background-origin: padding-box;
  }

  .border-origin {
    background-origin: border-box;
  }

  .content-origin {
    background-origin: content-box;
  }
</style>
</head>
<body>

  <div class="elemento padding-origin">Origen: padding-box (10px, 10px desde el borde interior del padding)</div>
  <div class="elemento border-origin">Origen: border-box (10px, 10px desde el borde exterior del borde)</div>
  <div class="elemento content-origin">Origen: content-box (10px, 10px desde el borde interior del contenido)</div>

</body>
</html>

En este ejemplo, la imagen se desplaza 10 píxeles tanto desde la parte superior como desde la izquierda del origen definido por background-origin. Observarás que la posición final de la imagen varía según el valor de background-origin.

Relación con background-clip

Es importante distinguir background-origin de background-clip.

  • background-origin: Define el punto de referencia para la propiedad background-position.
  • background-clip: Define hasta dónde se dibuja el fondo del elemento (incluyendo el color y la imagen).

Mientras que background-origin controla dónde comienza la imagen de fondo, background-clip controla dónde termina.

Casos de Uso Comunes

  • Alinear imágenes con el área de contenido: Si quieres que una imagen de fondo se posicione relativa al contenido interno de un elemento, utiliza background-origin: content-box;.
  • Aplicar patrones que deben cubrir todo el borde: Si tienes un patrón de fondo que debe comenzar desde el borde exterior, utiliza background-origin: border-box;.
  • La mayoría de los casos: background-origin: padding-box; (el valor predeterminado) suele ser suficiente y lógico, ya que el fondo generalmente se considera parte del área de contenido visual del elemento.

Consideraciones

  • La propiedad background-origin afecta cómo se interpreta la propiedad background-position. Asegúrate de ajustar background-position según el valor de background-origin que utilices para lograr el efecto deseado.
  • Ten en cuenta el modelo de caja de CSS (content, padding, border, margin) al trabajar con background-origin para comprender cómo se posicionará la imagen.

Conclusión

La propiedad background-origin te brinda un control preciso sobre el punto de inicio de tus imágenes de fondo en CSS. Al entender cómo interactúa con el modelo de caja y la propiedad background-position, puedes lograr diseños de fondo más sofisticados y alineados con tus necesidades visuales. ¡Experimenta con los diferentes valores para ver cómo afectan la apariencia de tus elementos!