---
title: background-origin
slug: Web/CSS/background-origin
tags:
  - CSS
  - CSS Referência
translation_of: Web/CSS/background-origin
---
<h2 id="Resumen">Resumen</h2>
<p>La propiedad background-origin especifica el área de origen de un fondo o imagen en determinada caja. para que la propiedad <a href="/es/CSS/background-position" title="background-position">background-position</a> calcule la posición de inicio de un fondo o imagen definida por la propiedad <a href="/es/CSS/background-image" title="background-image">background-image</a>.</p>
<ul>
 <li>Valor inicial: padding-box</li>
 <li>Aplica a: Todos los elementos</li>
 <li>Heredado: No</li>
 <li>Porcentajes: n/a</li>
 <li>Media: Visual</li>
 <li>Valor computado: Mismo que valor especificado.</li>
 <li>Animación: No</li>
</ul>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="eval">background-origin:[<code>padding-box | border-box | conten</code><code>t-box</code>][, [<code>border-box | padding-box | conten</code><code>t-box</code>]]*
</pre>
<h2 id="Valores">Valores</h2>
<dl>
 <dt>
  border-box</dt>
 <dd>
  <p>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.</p>
 </dd>
 <dt>
  padding-box</dt>
 <dd>
  <p>El fondo se extiende al borde exterior del padding, la posición es relativa al padding de la caja.</p>
 </dd>
 <dt>
  content-box</dt>
 <dd>
  <p>El fondo se extiende dentro del (recortado al) contenido de la caja, la posición es relativa al contenido de la caja.</p>
 </dd>
</dl>
<h2 id="Ejemplos">Ejemplos</h2>
<pre>div{
  border:4px dotted #FBE700;
  background:url('imagen.jpg');
  background-position:0 0;
  background-origin:border-box;
}
</pre>
<pre>div{
  background-image: url('image1.jpg'), url('image2.jpg');
  background-position: 0 0, bottom left;
  background-origin: padding-box, content-box;
}
</pre>
<h2 id="Notas">Notas</h2>
<ul>
 <li>La propiedad background-origin es ignorada si la propiedad background-attachment tiene un valor de fixed.</li>
 <li>Si el valor de esta propiedad no es establecido en la propiedad abreviada (shorthand) <a href="/es/CSS/background" title="background">background</a> que es aplicada a el elemento despues de la propiedad background-origin, el valor de esta propiedad sera restablecido a su valor inicial por la propiedad abreviada background.</li>
</ul>
<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>Soporte básico</td>
    <td>1.0</td>
    <td>4.0 (2.0)</td>
    <td>9.0</td>
    <td>10.5</td>
    <td>3.0 (522)</td>
   </tr>
  </tbody>
 </table>
</div>
<h2 id="Especificaciones">Especificaciones</h2>
<ul>
 <li><a class="external" href="http://dev.w3.org/csswg/css3-background/#the-background-origin" title="http://dev.w3.org/csswg/css3-background/#the-background-origin">Css fondos y bordes modulo nivel 3 </a> (candidato a recomendación]</li>
</ul>
<h2 id="Relacionado">Relacionado</h2>
<p><a href="/es/CSS/background" title="es/CSS/background">background</a>, <a href="/es/CSS/background-attachment" title="es/CSS/background-attachment">background-attachment</a><a href="/es/CSS/background-image" title="es/CSS/background-image">, background-image</a>,<a href="/es/CSS/background-repeat" title="es/CSS/background-repeat"> background-repeat</a></p>