Propiedad CSS background-origin
La propiedad CSS background-origin especifica el área de posicionamiento del fondo de una imagen de fondo.
La propiedad background-origin es una de las propiedades CSS3.
Si el background-attachment es fixed, la propiedad background-origin se ignora.
| Valor inicial | padding-box |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Heredado | No. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.backgroundOrigin = "content-box"; |
Sintaxis
Sintaxis de la propiedad CSS background-origin
css
background-origin: padding-box | border-box | content-box | initial | inherit;Ejemplo de la propiedad background-origin:
Ejemplo de la propiedad CSS background-origin con el valor padding-box
html
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.example1 {
border: 5px dashed #666;
padding: 35px;
background: url("https://es.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg");
background-repeat: no-repeat;
background-origin: padding-box;
}
</style>
</head>
<body>
<h2>Background-origin property example</h2>
<p>Here the background-origin is set to "padding-box".</p>
<div class="example1">
<h2>Hello world.</h2>
<p> Some text for example.</p>
</div>
</body>
</html>Resultado
A continuación se muestra un ejemplo que ilustra la diferencia entre padding-box y content-box.
Ejemplo de la propiedad background-origin con los valores "padding-box" y "content-box":
Ejemplo de la propiedad CSS background-origin con los valores padding-box y content-box
html
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.example1 {
border: 5px dashed #666;
padding: 35px;
background: url("https://es.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-repeat: no-repeat;
background-origin: padding-box;
}
.example2 {
border: 5px dashed #666;
padding: 35px;
background: url("https://es.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-repeat: no-repeat;
background-origin: content-box;
}
</style>
</head>
<body>
<h2>Background-origin property example</h2>
<p>Here the background-origin is set to "padding-box" which is the default value of this property.</p>
<div class="example1">
<h2>Hello world</h2>
<p> Some text for example.</p>
</div>
<p>Here the background-origin is set to "content-box".</p>
<div class="example2">
<h2>Hello world</h2>
<p> Some text for example.</p>
</div>
</body>
</html>En el siguiente ejemplo, vea cómo establecer dos imágenes de fondo para un elemento div con diferentes valores.
Ejemplo de la propiedad background-origin con diferentes valores:
Ejemplo de la propiedad CSS background-origin con los valores content-box y border-box
html
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example1 {
border: 5px double black;
padding: 25px;
background: url("https://es.w3docs.com/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("https://es.w3docs.com/uploads/media/default/0001/02/aa55a168be25d7d121dcab8d67ad72ce021dcde3.png");
background-repeat: no-repeat;
background-origin: content-box, border-box;
}
#example2 {
border: 5px double black;
padding: 25px;
background: url("https://es.w3docs.com/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("https://es.w3docs.com/uploads/media/default/0001/02/aa55a168be25d7d121dcab8d67ad72ce021dcde3.png");
background-repeat: no-repeat;
background-origin: content-box, padding-box;
}
#example3 {
border: 5px double black;
padding: 25px;
background: url("https://es.w3docs.com/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("https://es.w3docs.com/uploads/media/default/0001/02/aa55a168be25d7d121dcab8d67ad72ce021dcde3.png");
background-repeat: no-repeat;
background-origin: content-box, content-box;
}
</style>
</head>
<body>
<h2>Background-origin property example</h2>
<p>Here the background-origin: content-box, border-box; is set:</p>
<div id="example1">
<h2>Hello World</h2>
<p>The first background-image starts from the upper left corner of the content.</p>
<p>The second background-image starts from the upper left corner of the border.</p>
</div>
<p>Here the background-origin: content-box, padding-box:</p>
<div id="example2">
<h2>Hello World</h2>
<p>The first background image starts from the upper left corner of the content.</p>
<p>The second background-image starts from the upper left corner of the padding edge.</p>
</div>
<p>Here the background-origin: content-box, content-box; is set:</p>
<div id="example3">
<h2>Hello World</h2>
<p>Both background images start from the upper left corner of the content.</p>
</div>
</body>
</html>Valores
| Valor | Descripción | Probar |
|---|---|---|
| border-box | La background-position es relativa al cuadro del borde y la imagen de fondo comienza desde la esquina superior izquierda del borde. | Probar » |
| padding-box | La background-position es relativa al cuadro de relleno y la imagen de fondo comienza desde la esquina superior izquierda del borde del relleno. Este es el valor predeterminado. | Probar » |
| content-box | La background-position es relativa al cuadro de contenido y la imagen de fondo comienza desde la esquina superior izquierda del contenido. | Probar » |
| initial | Establece la propiedad en su valor predeterminado. | Probar » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Qué controla la propiedad CSS background-origin?