Característica background-origin en CSS

La propiedad background-originen CSS define el principio de la imagen de fondo especificada por la propiedad background-image.

Tenga en cuenta que la propiedad background-origin no tendrá ningún efecto cuando el valor de la propiedad se establezca background-attachment en fixed.

Tenga en cuenta que la propiedad abreviada background restablecerá el valor de esta propiedad a su valor inicial si no se establece allí.

Funciones background origin en css

Valor inicial	`padding-box`
Aplicado a	Todos los artículos.
Heredable	No
Móvil	No
Valor calculado	Como se especificó.

/* palabras reservadas */ 
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

/* valores globales */ 
background-origin: inherit;
background-origin: initial;
background-origin: unset;

Ejemplos y aplicaciones

Ejemplo de uso del elemento <div> con imagen de fondo ( background-image) seleccionado duplicado una vez ( background-repeat) y color de fondo ( ) configurado en plata ( background-color) y color de texto ( color) en blanco. Tenga en cuenta que hemos agregado un marco grueso y una border anotación padding para marcar la diferencia entre el efecto de los valores visibles.

Código HTML:

< div  class = "border-box" >
  Contenido de texto número 1
</ div >

< div  class = "padding-box" >
  Contenido de texto número 2
</ div >

< div  class = "content-box" >
  Contenido de texto número 3
</ div >

Código CSS:

div {
  border: 10px double;
  padding: 10px;
  color: white;
  background-image: url(bg-image.png);
  background-color: lightgreen;
  background-repeat: no-repeat;
}
.border-box {
  background-origin: border-box;
}
.padding-box {
  background-origin: padding-box;
}
.content-box {
  background-origin: content-box;
}

Tenga en cuenta cómo podemos especificar varios valores de propiedad background-origin en la misma regla si tenemos más de una imagen de fondo:

div {
  background-image: url(image-1.png), url(image-2.png);
  background-origin: content-box, padding-box;
}

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	1.0	4.0	9.0	10,5	3,0

Estructura general

La propiedad puede utilizar background-origin una o más de las siguientes palabras reservadas

<box>

border-box

La posición del fondo será relativa al borde del mismo.

padding-box

La posición del fondo será relativa al borde de relleno.

content-box

La posición del fondo será relativa al cuadro de contenido.

Estructura formal

background-clip: <box>#;

El valor se puede repetir <box> más de una vez, separado por una coma, para identificar el principio de cada imagen de fondo.

<box> = border-box | padding-box | content-box

Vea también

Propiedades de la página incautados por la propiedad de acceso directo background: la background-clip, background-color, background-image, background-position, background-repeat, background-size y background-attachment.
Página de propiedades color para establecer el color del elemento.
página de características box-sizing.
notas al pie padding.