background-position

  • Revision slug: CSS/background-position
  • Revision title: background-position
  • Revision id: 344747
  • Created:
  • Creator: m_gol
  • Is current revision? No
  • Comment Four-value syntax supported in Webkit Nightly and Chrome Canary (26.0)

Revision Content

{{ CSSRef }}

Summary

The background-position CSS property sets the initial position, relative to the background position layer defined by {{ cssxref("background-origin") }} for each defined background image.

If the value of this property is not set in a {{ cssxref("background") }} shorthand property that is applied to the element after the background-position CSS property, the value of this property is then reset to its initial value by the shorthand property.
  • {{ Xref_cssinitial }} 0% 0%
  • Applies to all elements
  • {{ Xref_cssinherited }} no
  • Percentages refer to the size of the background position layer, minus the size of the image
  • Media {{ Xref_cssvisual }}
  • {{ Xref_csscomputed()}} If one or two values are specified, for a {{ xref_csslength }} the absolute length, otherwise a percentage.
    If three or four values are specified, two pairs of a keyword plus a length or percentage.

Syntax

background-position:  <position>[, <position>]*

Values

<position>
Is a {{ xref_cssposition }}, that is one to four values representing a 2D position regarding the edges of the element's box. Relative or absolute offsets can be given. Note that the position can be set outside of the element's box.

Examples

{{ CSSLiveSample("background-position") }}

.exampleone {
  background-image: url("logo.png");
  background-position: top;
}

.exampletwo {
  background-image: url("logo.png");
  background-position: 25% 75%;
}

.examplethree {
  background: url("logo.png") 2cm bottom;
}

.examplefour {
  background-image: url("logo.png");
  background-position: center 10%;
}

.examplefive {
  background: url("logo.png") 3em 50%;
}

.examplesix {
  background-image: url("logo.png");
  background-position: right 20px bottom 20px;
}
	
.exampleseven {
  /* Multiple background images:
       Each image is matched with the corresponding position style, 
       from first specified to last. */

  background-image: url("img1.png"), url("img2.png");
  background-position: 0px 0px, center;
}

Specifications

Specification Status Comment
{{ SpecName('CSS3 Backgrounds', '#background-position', 'background-position') }} {{ Spec2('CSS3 Backgrounds') }} Added support for multiple backgrounds, the four-value syntax and modified the percentage definition to match implementations.
{{ SpecName('CSS2.1', 'colors.html#propdef-background-position', 'background-position') }} {{ Spec2('CSS2.1') }} Allows for the mix of keyword values and {{ xref_csslength }} and {{ xref_csspercentage }} values.
{{ SpecName('CSS1', '#background-position', 'background-position') }} {{ Spec2('CSS1') }}  

Browser compatibility

{{ CompatibilityTable }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 {{ CompatGeckoDesktop("1") }} 4.0 3.5 1.0 (85)
Multiple backgrounds 1.0 {{ CompatGeckoDesktop("1.9.2") }} 9.0 10.5 1.3 (312)
Four-value syntax (support for offsets from any edge) 26.0 (maybe earlier) {{ webkitbug("37514") }} {{ CompatGeckoDesktop("13.0") }} {{ CompatNo }} 10.5 Nightly {{ webkitbug("37514") }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatVersionUnknown }} {{ CompatGeckoMobile("1") }} {{ CompatVersionUnknown }} {{ CompatVersionUnknown }} {{ CompatVersionUnknown }}
Multiple backgrounds {{ CompatUnknown }} {{ CompatGeckoMobile("1.9.2") }} {{ CompatUnknown }} {{ CompatUnknown }} {{ CompatUnknown }}
Four-value syntax (support for offsets from any edge) {{ CompatNo }} {{ CompatGeckoMobile("13.0") }} {{ CompatUnknown }} {{ CompatUnknown }} {{ CompatNo }}

See also

Revision Source

<div>
  {{ CSSRef }}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p>The<code> background-position </code>CSS property sets the initial position, relative to the background position layer defined by {{ cssxref("background-origin") }} for each defined background image.</p>
<div class="note">
  If the value of this property is not set in a {{ cssxref("background") }} shorthand property that is applied to the element after the <code>background-position</code> CSS property, the value of this property is then reset to its initial value by the shorthand property.</div>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial }}</dfn><code> 0% 0%</code></li>
  <li><dfn>Applies to</dfn> all elements</li>
  <li><dfn>{{ Xref_cssinherited }}</dfn> no</li>
  <li><dfn>Percentages</dfn> refer to the size of the background position layer, minus the size of the image</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual }}</li>
  <li><dfn>{{ Xref_csscomputed()}}</dfn> If one or two values are specified, for a {{ xref_csslength }} the absolute length, otherwise a percentage.<br />
    If three or four values are specified, two pairs of a keyword plus a length or percentage.</li>
</ul>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
background-position:  &lt;position&gt;[, &lt;position&gt;]*</pre>
<h3 id="Values" name="Values">Values</h3>
<dl>
  <dt>
    <code>&lt;position&gt;</code></dt>
  <dd>
    Is a {{ xref_cssposition }}, that is one to four values representing a 2D position regarding the edges of the element's box. Relative or absolute offsets can be given. Note that the position can be set outside of the element's box.</dd>
</dl>
<h2 id="Examples" name="Examples">Examples</h2>
<p>{{ CSSLiveSample("background-position") }}</p>
<pre class="brush:css; highlight:[3,8,12,17,26,35];">
.exampleone {
  background-image: url("logo.png");
  background-position: top;
}

.exampletwo {
  background-image: url("logo.png");
  background-position: 25% 75%;
}

.examplethree {
  background: url("logo.png") 2cm bottom;
}

.examplefour {
  background-image: url("logo.png");
  background-position: center 10%;
}

.examplefive {
  background: url("logo.png") 3em 50%;
}

.examplesix {
  background-image: url("logo.png");
  background-position: right 20px bottom 20px;
}
	
.exampleseven {
  /* Multiple background images:
       Each image is matched with the corresponding position style, 
       from first specified to last. */

  background-image: url("img1.png"), url("img2.png");
  background-position: 0px 0px, center;
}</pre>
<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>Added support for multiple backgrounds, the four-value syntax and modified 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 the mix of keyword values and {{ xref_csslength }} and {{ xref_csspercentage }} values.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS1', '#background-position', 'background-position') }}</td>
      <td>{{ Spec2('CSS1') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable }}</p>
<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>Basic support</td>
        <td>1.0</td>
        <td>{{ CompatGeckoDesktop("1") }}</td>
        <td>4.0</td>
        <td>3.5</td>
        <td>1.0 (85)</td>
      </tr>
      <tr>
        <td>Multiple backgrounds</td>
        <td>1.0</td>
        <td>{{ CompatGeckoDesktop("1.9.2") }}</td>
        <td>9.0</td>
        <td>10.5</td>
        <td>1.3 (312)</td>
      </tr>
      <tr>
        <td>Four-value syntax (support for offsets from any edge)</td>
        <td>26.0 (maybe earlier) {{ webkitbug("37514") }}</td>
        <td>{{ CompatGeckoDesktop("13.0") }}</td>
        <td>{{ CompatNo }}</td>
        <td>10.5</td>
        <td>Nightly {{ webkitbug("37514") }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatVersionUnknown }}</td>
        <td>{{ CompatGeckoMobile("1") }}</td>
        <td>{{ CompatVersionUnknown }}</td>
        <td>{{ CompatVersionUnknown }}</td>
        <td>{{ CompatVersionUnknown }}</td>
      </tr>
      <tr>
        <td>Multiple backgrounds</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatGeckoMobile("1.9.2") }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
      </tr>
      <tr>
        <td>Four-value syntax (support for offsets from any edge)</td>
        <td>{{ CompatNo }}</td>
        <td>{{ CompatGeckoMobile("13.0") }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatUnknown }}</td>
        <td>{{ CompatNo }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li>Background-related CSS properties: {{ CSS_Reference:Background }}</li>
  <li><a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">Multiple backgrounds</a></li>
</ul>
Revert to this revision