Propiedad background-origin

La propiedad background-origin establece cómo la imagen de fondo (específicamente la imagen, no el color de fondo) se colocará en relación con el elemento: parte de la imagen de fondo se superpondrá al borde, el fondo no se superpondrá al borde o el fondo se colocará solo sobre el contenido del elemento (es decir, el padding alejará el fondo).

Sintaxis

selector {
	background-origin: padding-box | border-box | content-box;
}

Valores

Valor	Descripción
`border-box`	La imagen de fondo se superpondrá al borde.
`padding-box`	La imagen de fondo no se superpondrá al borde.
`content-box`	La imagen de fondo estará solo sobre el contenido.

Valor por defecto: padding-box.

Notas

La propiedad background-origin no funciona cuando background-attachment tiene el valor fixed. También con background-repeat en el valor repeat la propiedad background-origin siempre funciona como con el valor border-box.

Ejemplo . Por defecto

Por defecto el fondo no se superpondrá al borde:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Ejemplo . Valor border-box

Ahora el fondo se superpondrá al borde:

<div id="elem"></div>

#elem {
	background-origin: border-box;
	background-image: url("bg.png");
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Ejemplo . Valor content-box

Y ahora el fondo se alejará debido al padding:

<div id="elem"></div>

#elem {
	background-origin: content-box;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Ejemplo . Con background-repeat: repeat

Con background-repeat en el valor repeat la propiedad background-origin siempre funciona como con el valor border-box, es decir, el fondo siempre se superpone al borde:

<div id="elem"></div>

#elem {
	background-repeat: repeat;
	background-image: url("bg.png");
	border: 10px dashed black;
	padding: 30px;
	width: 350px;
	height: 300px;
}

Véase también

la propiedad background-clip,
que establece la posición tanto de la imagen de fondo como del color de fondo
la propiedad background,
que es una propiedad abreviada para el fondo