Propiedad CSS background-origin

La propiedad CSS background-origin especifica el área de posicionamiento del fondo — la caja desde la cual se posiciona y comienza a dibujarse una background-image.

Cada elemento se construye a partir de tres cajas anidadas: el content box (donde viven el texto y los elementos hijo), el padding box (el contenido más el padding) y el border box (el padding box más el borde). El valor de background-origin elige cuál de estas cajas actúa como punto de origen (la esquina superior izquierda) para la imagen, y con respecto a qué área se mide background-position.

Por defecto, una imagen de fondo se posiciona en relación con el padding box, por lo que queda detrás del relleno pero bajo el borde. Cambiar a content-box desplaza la imagen hacia adentro del relleno; cambiar a border-box permite que se extienda bajo el borde. Úsalo cuando quieras alinear con precisión una imagen de fondo con el contenido, o para situarla deliberadamente debajo del borde (o sacándola de él).

No lo confundas con background-clip. background-origin decide dónde empieza la imagen; background-clip decide dónde se recorta el fondo pintado. Aceptan las mismas palabras clave pero responden preguntas distintas, y se usan frecuentemente juntas.

La propiedad background-origin no tiene efecto sobre un fondo fixed: si background-attachment es fixed, la imagen se posiciona en relación con el viewport y background-origin se ignora. Es una de las propiedades CSS3.

Valor inicial	padding-box
Se aplica a	Todos los elementos. También se aplica a ::first-letter y ::first-line.
Heredado	No.
Animatable	No.
Versión	CSS3
Sintaxis DOM	object.style.backgroundOrigin = "content-box";

Sintaxis

Sintaxis de la propiedad CSS background-origin

background-origin: padding-box | border-box | content-box | initial | inherit;

Ejemplo de la propiedad background-origin:

Ejemplo de la propiedad CSS background-origin con el valor padding-box

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example1 {
        border: 5px dashed #666;
        padding: 35px;
        background: url("/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg");
        background-repeat: no-repeat;
        background-origin: padding-box;
      }
    </style>
  </head>
  <body>
    <h2>Background-origin property example</h2>
    <p>Here the background-origin is set to "padding-box".</p>
    <div class="example1">
      <h2>Hello world.</h2>
      <p> Some text for example.</p>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

A continuación se muestra un ejemplo que ilustra la diferencia entre padding-box y content-box.

Ejemplo de la propiedad background-origin con los valores "padding-box" y "content-box":

Ejemplo de la propiedad CSS background-origin con los valores padding-box y content-box

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example1 {
        border: 5px dashed #666;
        padding: 35px;
        background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-repeat: no-repeat;
        background-origin: padding-box;
      }
      .example2 {
        border: 5px dashed #666;
        padding: 35px;
        background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-repeat: no-repeat;
        background-origin: content-box;
      }
    </style>
  </head>
  <body>
    <h2>Background-origin property example</h2>
    <p>Here the background-origin is set to "padding-box" which is the default value of this property.</p>
    <div class="example1">
      <h2>Hello  world</h2>
      <p> Some text for example.</p>
    </div>
    <p>Here the background-origin is set to "content-box".</p>
    <div class="example2">
      <h2>Hello  world</h2>
      <p> Some text for example.</p>
    </div>
  </body>
</html>

Pruébalo tú mismo »

En el siguiente ejemplo, observa cómo establecer dos imágenes de fondo para un elemento div con valores diferentes.

Ejemplo de la propiedad background-origin con valores diferentes:

Ejemplo de la propiedad CSS background-origin con los valores content-box y border-box

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example1 {
        border: 5px double black;
        padding: 25px;
        background: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("/uploads/media/default/0001/02/aa55a168be25d7d121dcab8d67ad72ce021dcde3.png");
        background-repeat: no-repeat;
        background-origin: content-box, border-box;
      }
      #example2 {
        border: 5px double black;
        padding: 25px;
        background: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("/uploads/media/default/0001/02/aa55a168be25d7d121dcab8d67ad72ce021dcde3.png");
        background-repeat: no-repeat;
        background-origin: content-box, padding-box;
      }
      #example3 {
        border: 5px double black;
        padding: 25px;
        background: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("/uploads/media/default/0001/02/aa55a168be25d7d121dcab8d67ad72ce021dcde3.png");
        background-repeat: no-repeat;
        background-origin: content-box, content-box;
      }
    </style>
  </head>
  <body>
    <h2>Background-origin property example</h2>
    <p>Here the background-origin: content-box, border-box; is set:</p>
    <div id="example1">
      <h2>Hello World</h2>
      <p>The first background-image starts from the upper left corner of the content.</p>
      <p>The second background-image starts from the upper left corner of the border.</p>
    </div>
    <p>Here the background-origin: content-box, padding-box:</p>
    <div id="example2">
      <h2>Hello World</h2>
      <p>The first background image starts from the upper left corner of the content.</p>
      <p>The second background-image starts from the upper left corner of the padding edge.</p>
    </div>
    <p>Here the background-origin: content-box, content-box; is set:</p>
    <div id="example3">
      <h2>Hello World</h2>
      <p>Both background images start from the upper left corner of the content.</p>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Fondos múltiples

Cuando un elemento tiene varias imágenes de fondo separadas por comas, puedes asignar un origen distinto a cada una — los valores se corresponden con las imágenes en orden. En el ejemplo anterior, background-origin: content-box, border-box; aplica content-box a la primera imagen y border-box a la segunda. Si proporcionas menos valores que imágenes, CSS repite la lista para cubrir las imágenes restantes.

Consejos y advertencias

Sin efecto sin imagen de fondo. background-origin solo cambia dónde empieza una imagen; no afecta a un color de fondo plano. Para controlar dónde se pinta un color, usa background-clip en su lugar.
Necesita espacio para ser visible. Con padding cero y sin borde, el content box, el padding box y el border box coinciden, por lo que los tres valores parecen idénticos. El efecto solo se aprecia cuando el elemento tiene relleno y/o borde.
fixed lo anula. Como se indicó antes, background-attachment: fixed hace que la posición de la imagen sea relativa al viewport, lo que desactiva background-origin.
Combínalo con background-clip. Un patrón habitual es background-origin: border-box; background-clip: padding-box; — la imagen se dispone desde el borde pero se recorta en el borde del relleno.

Compatibilidad con navegadores

background-origin es compatible con todos los navegadores modernos — Chrome, Firefox, Safari, Edge y Opera. No se requiere prefijo de proveedor en las versiones actuales.

Valores

Valor	Descripción	Pruébalo
border-box	background-position es relativo al border box y la imagen de fondo comienza desde la esquina superior izquierda del borde.	Pruébalo »
padding-box	background-position es relativo al padding box y la imagen de fondo comienza desde la esquina superior izquierda del borde del relleno. Este es el valor predeterminado.	Pruébalo »
content-box	background-position es relativo al content box y la imagen de fondo comienza desde la esquina superior izquierda del contenido.	Pruébalo »
initial	Establece la propiedad a su valor predeterminado.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué controla la propiedad CSS background-origin?

La posición inicial de una imagen de fondo especificada por la propiedad background.La ubicación de la imagen o color de fondo en relación con el border box, el padding box o el content box del elemento.La resolución de la imagen de fondo.La velocidad de los efectos de transición de una imagen de fondo.Funciona en sinergia con otras propiedades como background-clip o background-size.