Bordes redondeados (border-radius) Bordes redondeados en los vértices Sombras (box-shadow) Sombras múltiples (box-shadow) Sombras interiores Sombras con transparencias Sombras de texto Rotación Punto de origen Escalado Translación Torcer (transform:skew) Múltiples transformaciones en forma simultanea Opacidad (opacity) Opacidad (color) Múltiples columnas (column-count) Múltiples columnas dinámicas (column-width) Múltiples columnas y su separación (column-gap) Múltiples columnas y línea separadora (column-rule) Importar una fuente no disponible en el navegador (@font-face) Imágenes de fondo (background-image) Imágenes de fondo en diferentes posiciones (background-position) Imágenes de fondo (background-size) Imágenes de fondo (background-origin) Transiciones de una propiedad (transition) Transiciones de múltiples propiedades (transition) Transiciones (funciones de transición) Transiciones (tiempo de demora en iniciar la transición) Transiciones (otra sintaxis para hacer lo mismo) Animaciones (sintaxis básica) Animaciones (animation-iteration-count y animation-direction) Animaciones (animation-timing-function y animation-delay) Animaciones (animation-play-state) Animaciones (definición de más de 2 keyframes)

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.