Imágenes de fondo (background-origin)

La propiedad background-origin es utilizada para determinar como se calcula la posición ( background-position ) de la imagen de fondo ( background-image ). Por defecto la imagen de fondo empieza al margen exterior del relleno ( padding ).

La propiedad background-origin especifica el área de origen de un fondo o imagen en determinada caja. para que la propiedad background-position calcule la posición de inicio de un fondo o imagen definida por la propiedad background-image.

Elemento { 
     background-origin: border-box/padding-box/content-box; 
}

Valores

  • border-box  El fondo se extiende al borde exterior (por debajo del borde en el orden z), la posición es relativa al borde de la caja.
  • padding-box El fondo se extiende al borde exterior del padding, la posición es relativa al padding de la caja.
  • content-box  El fondo se extiende dentro del (recortado al) contenido de la caja, la posición es relativa al contenido de la caja.

Un ejemplo de disponer en tres recuadros imágenes de fondo inicializando la propiedad background-origin con los tres valores posibles:

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 10px dashed black;
  padding: 25px;
  background: url(paper.jpg);
  background-repeat: no-repeat;
  background-origin: padding-box;
}

#example2 {
  border: 10px dashed black;
  padding: 25px;
  background: url(paper.jpg);
  background-repeat: no-repeat;
  background-origin: border-box;
}

#example3 {
  border: 10px dashed black;
  padding: 25px; 
  background: url(paper.jpg);
  background-repeat: no-repeat;
  background-origin: content-box;}
</style>
</head>
<body>
<h2>background-origin: padding-box (default):</h2>
<div id="example1">
  <h2>Hola Mundo</h2>
  <p>La imagen de fondo comienza en la esquina superior izquierda del borde de relleno.</p>
</div>

<h2>background-origin: border-box:</h2>
<div id="example2">
  <h2>Hola Mundo</h2>
  <p>La imagen de fondo comienza en la esquina superior izquierda del borde..</p>
</div>

<h2>background-origin: content-box:</h2>
<div id="example3">
  <h2>Hola Mundo</h2>
  <p>La imagen de fondo comienza en la esquina superior izquierda del contenido.</p>
</div>
</body>
</html>

background-origin: padding-box (default):

Hola Mundo

La imagen de fondo comienza en la esquina superior izquierda del borde de relleno.

background-origin: border-box:

Hola Mundo

La imagen de fondo comienza en la esquina superior izquierda del borde..

background-origin: content-box:

Hola Mundo

La imagen de fondo comienza en la esquina superior izquierda del contenido.