Atributo background-origin CSS

Definición y uso

background-origin Regula el atributo background-position ¿Para qué posición se ubica el atributo?

Comentarios:Si la imagen de fondo de background-attachment El atributo es "fixed“”， entonces esta propiedad no tiene efecto.

Véase también:

Tutoriales de CSS:Fondo de CSS、CSS Fondo (avanzado)

Manual de referencia de HTML DOM:Atributo backgroundOrigin

Ejemplo

Ubicar la imagen de fondo en relación con el cuadro de contenido:

div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}

Prueba tu mismo

Sintaxis de CSS

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

Valor del atributo

Valor Descripción Pruebas
padding-box La imagen de fondo se ubica en relación con el cuadro de relleno. Pruebas
border-box La imagen de fondo se ubica en relación con el cuadro de borde. Pruebas
content-box La imagen de fondo se ubica en relación con el cuadro de contenido. Pruebas

Detalles técnicos

Valor predeterminado: padding-box
Herencia: no
Versión: CSS3
Sintaxis de JavaScript: object.style.backgroundOrigin="content-box"

Compatibilidad del navegador

La tabla indica la versión del navegador que admite completamente la propiedad.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
4.0 9.0 4.0 3.0 10.5