---
title: background-position
slug: Web/CSS/background-position
translation_of: Web/CSS/background-position
---
<div>{{CSSRef}}</div>

<p>A propriedade <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>background-position</code></strong> define a posição inicial, relativa a posição de fundo na camada definido por {{cssxref("background-origin")}}, para cada background image definido.</p>

<div>{{EmbedInteractiveExample("pages/css/background-position.html")}}</div>

<p class="hidden">A fonte deste exemplo interativo está alocado em um repositório GitHub. Se você pudesse contribuir com os exemplos de projetos interativos , por favor "clone" <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e envie-nos um pull request.</p>

<h2 id="Syntax" name="Syntax">Sintaxe</h2>

<pre class="brush: css no-line-numbers">/* Valores chave */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* Valores &lt;percentuais&gt; */
background-position: 25% 75%;

/* valores &lt;espessura&gt; */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Multiplas imagens */
background-position: 0 0, center;

/* Valores de cantos relativos */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

/* Valores globais */
background-position: inherit;
background-position: initial;
background-position: unset;
</pre>

<p>A propriedade <code>background-position</code> é especificada como um determinado numero de valores de <code><a href="#&lt;position>">&lt;position&gt;</a></code> , separados por espaços.</p>

<h3 id="Values" name="Values">Values</h3>

<dl>
 <dt><a id="&lt;position>" name="&lt;position>"><code>&lt;position&gt;</code></a></dt>
 <dd>A {{cssxref("&lt;position&gt;")}}. A position defines an x/y coordinate, to place an item relative to the edges of an element's box. It can be defined using one or two values. If two values are used, the first value represents the horizontal position and the second represents the vertical position. If only one value is specified, the second value is assumed to be <code>center</code>.</dd>
 <dd>
 <p><strong>1-value syntax:</strong> the value may be:</p>

 <ul>
  <li>The keyword value <code>center</code>, which centers the image.</li>
  <li>One of the keyword values <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>. This specifies an edge against which to place the item. The other dimension is then set to 50%, so the item is placed in the middle of the edge specified.</li>
  <li>A {{cssxref("&lt;length&gt;")}} or {{cssxref("&lt;percentage&gt;")}}. This specifies the X coordinate relative to the left edge, with the Y coordinate set to 50%.</li>
 </ul>

 <p><strong>2-value syntax:</strong> one value defines X and the other defines Y. Each value may be:</p>

 <ul>
  <li>One of the keyword values <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>. If <code>left</code> or <code>right</code> are given here, then this defines X and the other given value defines Y. If <code>top</code> or <code>bottom</code> are given, then this defines Y and the other value defines X.</li>
  <li>A {{cssxref("&lt;length&gt;")}} or {{cssxref("&lt;percentage&gt;")}}. If the other value is <code>left</code> or <code>right</code>, then this value defines Y, relative to the top edge. If the other value is <code>top</code> or <code>bottom</code>, then this value defines X, relative to the left edge. If both values are <code>&lt;length&gt;</code> or <code>&lt;percentage&gt;</code> values, then the first defines X and the second Y.</li>
 </ul>

 <p>Note that:</p>

 <ul>
  <li>If one value is <code>top</code> or <code>bottom</code>, then the other value may not be <code>top</code> or <code>bottom</code>.</li>
  <li>If one value is <code>left</code> or <code>right</code>, then the other value may not be <code>left</code> or <code>right</code>.</li>
 </ul>

 <p>This means, e.g., that <code>top top</code> and <code>left right</code> are not valid.</p>
 </dd>
</dl>

<h3 id="Formal_syntax">Formal syntax</h3>

{{csssyntax}}

<h2 id="Examples" name="Examples">Examples</h2>

<p>Each of these three examples uses the {{cssxref("background")}} property to create a yellow, rectangular element containing a star image. In each example, the star is in a different position. The third example illustrates how to specify positions for two different background images within one element.</p>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div class="exampleone"&gt;Example One&lt;/div&gt;
&lt;div class="exampletwo"&gt;Example Two&lt;/div&gt;
&lt;div class="examplethree"&gt;Example Three&lt;/div&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">/* Shared among all &lt;div&gt;s */
div {
  background-color: #FFEE99;
  background-repeat: no-repeat;
  width: 300px;
  height: 80px;
  margin-bottom: 12px;
}

/* These examples use the `background` shorthand property */
.exampleone {
  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
}
.exampletwo {
  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 3em 50% no-repeat;
}

/* Multiple background images: Each image is matched with the
   corresponding position, from first specified to last. */
.examplethree {
  background-image:    url("https://mdn.mozillademos.org/files/11987/startransparent.gif"),
                       url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-position: 0px 0px,
                       center;
}</pre>

<h3 id="Result">Result</h3>

<p>{{EmbedLiveSample('Examples', 420, 200)}}</p>

<h2 id="Specifications" name="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Backgrounds', '#background-position', 'background-position')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td>Adds support for multiple backgrounds and the four-value syntax. Modifies the percentage definition to match implementations.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-position', 'background-position')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Allows for keyword values and {{cssxref("&lt;length&gt;")}} and {{cssxref("&lt;percentage&gt;")}} values to be mixed.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#background-position', 'background-position')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

<p>{{Compat("css.properties.background-position")}}</p>

<h3 id="Quantum_CSS_notes">Quantum CSS notes</h3>

<ul>
 <li>Gecko has a bug meaning that <code>background-position</code> can't be {{cssxref("transition","transitioned")}} between two values containing different numbers of {{cssxref("&lt;position&gt;")}} values, for example <code>background-position: 10px 10px;</code> and <code>background-position: 20px 20px, 30px 30px;</code> (see {{bug(1390446)}}). Firefox's new parallel CSS engine (also known as <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> or <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, planned for release in Firefox 57) fixes this.</li>
</ul>

<h2 id="See_also" name="See_also">See also</h2>

<ul>
 <li>{{cssxref("background-position-x")}}</li>
 <li>{{cssxref("background-position-y")}}</li>
 <li>{{cssxref("background-position-inline")}}</li>
 <li>{{cssxref("background-position-block")}}</li>
 <li><a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">Using multiple backgrounds</a></li>
 <li>{{cssxref("transform-origin")}}</li>
</ul>