background-position

  • Revision slug: CSS/background-position
  • Revision title: background-position
  • Revision id: 291331
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

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:  <bg-position>[, <bg-position>]*
background-position:  [ {{ Xref_csspercentage() }}| {{ Xref_csslength() }}| left | center | right  ] 
                      [ <percentage> | <length> | top  | center | bottom ]?

background-position:  [ top | center | bottom ]
background-position:  {{ cssxref("inherit") }}

Where:

<bg-position> is one of:
[ {{ Xref_csspercentage() }}| {{ Xref_csslength() }}| left | center | right  ]
                      [ <percentage> | <length> | top  | center | bottom ]?
[ top | center | bottom ]
{{ cssxref("inherit") }}

Values

Accepts one or two values, up to four values in supporting browsers. Negative {{ Xref_csspercentage() }} and {{ Xref_csslength() }} values are allowed.

  • If only one value is specified, the second value is assumed to be center.
  • The first value represents the horizontal position and the second represents the vertical position (if at least one value is not a keyword).

The specifications allow for 4 values enabling offsetting a background image from any corner, not just the top left. If four values are specified, they must include two sides and two offsets. This is not yet fully supported in all browsers.

<percentage>
With a value pair of 0% 0%, (is equal to 0 0) the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A value pair of 100% 100% places the lower right corner of the image in the lower right corner of padding area. With a value pair of 14% 84%, the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.
<length>
With a value pair of 2cm 1cm, the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the padding area.
top
Equivalent to 0% for the vertical position.
right
Equivalent to 100% for the horizontal position.
bottom
Equivalent to 100% for the vertical position.
left
Equivalent to 0% for the horizontal position.
center
Equivalent to 50% for the horizontal position if it is not otherwise given, or 50% for the vertical position if it is.

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
CSS Backgrounds and Borders Module Level 3 {{ Spec2('CSS3 Backgrounds') }} Added support for multiple backgrounds, the four-value syntax and modified the percentage definition to match implementations.
CSS 2.1 {{ Spec2('CSS2.1') }} Allows for the mix of keyword values and {{ xref_csslength() }} and {{ xref_csspercentage() }} values.
CSS 1 {{ 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 values syntax {{ CompatNo() }} {{ webkitbug("37514") }} {{ CompatGeckoDesktop("13.0") }} 9.0 10.5 {{ CompatNo() }} {{ 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 values syntax {{ CompatNo() }} {{ CompatGeckoMobile("13.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatNo() }}

See also

{{ languages({ "de": "de/CSS/background-position", "fr": "fr/CSS/background-position", "pl": "pl/CSS/background-position", "es": "es/CSS/background-position", "ja": "ja/CSS/background-position", "pt":"pt/CSS/background-position"}) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="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">Syntax</h2>
<pre class="eval">
background-position:  &lt;bg-position&gt;[, &lt;bg-position&gt;]*
background-position:  [ {{ Xref_csspercentage() }}| {{ Xref_csslength() }}| left | center | right  ] 
                      [ &lt;percentage&gt; | &lt;length&gt; | top  | center | bottom ]?

background-position:  [ top | center | bottom ]
background-position:  {{ cssxref("inherit") }}
</pre>
<p>Where:</p>
<dl>
  <dt>
    &lt;bg-position&gt; is one of:</dt>
  <dd>
    <code>[ {{ Xref_csspercentage() }}| {{ Xref_csslength() }}| left | center | right&nbsp; ]<br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [ &lt;percentage&gt; | &lt;length&gt; | top&nbsp; | center | bottom ]?<br />
    [ top | center | bottom ]<br />
    {{ cssxref("inherit") }}</code></dd>
</dl>
<h3 id="Values">Values</h3>
<p>Accepts one or two values, up to four values in supporting browsers. Negative {{ Xref_csspercentage() }} and {{ Xref_csslength() }} values are allowed.</p>
<ul>
  <li>If only one value is specified, the second value is assumed to be<code> center</code>.</li>
  <li>The first value represents the horizontal position and the second represents the vertical position (if at least one value is not a keyword).</li>
</ul>
<p>The specifications allow for 4 values enabling offsetting a background image from any corner, not just the top left. If four values are specified, they must include two sides and two offsets. This is not yet fully supported in all browsers.</p>
<dl>
  <dt>
    <code>&lt;percentage&gt;</code></dt>
  <dd>
    With a value pair of<code> 0% 0%,</code> (is equal to<code> 0 0</code>) the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A value pair of<code> 100% 100% </code>places the lower right corner of the image in the lower right corner of padding area. With a value pair of<code> 14% 84%</code>, the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.</dd>
  <dt>
    <code>&lt;length&gt;</code></dt>
  <dd>
    With a value pair of<code> 2cm 1cm</code>, the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the padding area.</dd>
  <dt>
    <code><strong>top</strong></code></dt>
  <dd>
    Equivalent to<code> 0% </code>for the vertical position.</dd>
  <dt>
    <code><strong>right</strong></code></dt>
  <dd>
    Equivalent to<code> 100% </code>for the horizontal position.</dd>
  <dt>
    <code><strong>bottom</strong></code></dt>
  <dd>
    Equivalent to<code> 100% </code>for the vertical position.</dd>
  <dt>
    <code><strong>left</strong></code></dt>
  <dd>
    Equivalent to<code> 0% </code>for the horizontal position.</dd>
  <dt>
    <code><strong>center</strong></code></dt>
  <dd>
    Equivalent to<code> 50% </code>for the horizontal position if it is not otherwise given, or<code> 50% </code>for the vertical position if it is.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<p>{{ CSSLiveSample("background-position") }}</p>
<pre class="brush:css; highlight:[3,8,12,17,26,32];">
.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. */
&nbsp; background-image: url("img1.png"), url("img2.png");
&nbsp; background-position: 0px 0px, center;
} 
</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr style="background-color: rgb(255, 204, 255);">
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a class="external" href="http://www.w3.org/TR/css3-background/#background-position" title="http://www.w3.org/TR/css3-background/#background-position">CSS Backgrounds and Borders Module Level 3</a></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><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-position" title="http://www.w3.org/TR/CSS21/colors.html#propdef-background-position">CSS 2.1</a></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><a class="external" href="http://www.w3.org/TR/CSS1/#background-position" title="http://www.w3.org/TR/CSS1/#background-position">CSS 1</a></td>
      <td>{{ Spec2('CSS1') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="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 values syntax</td>
        <td>{{ CompatNo() }} {{ webkitbug("37514") }}</td>
        <td>{{ CompatGeckoDesktop("13.0") }}</td>
        <td>9.0</td>
        <td>10.5</td>
        <td>{{ CompatNo() }} {{ 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 values syntax</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">See also</h2>
<ul>
  <li>Background-related CSS properties: {{ CSS_Reference:Background() }}</li>
  <li><a href="/en/CSS/Multiple_backgrounds" title="en/CSS/Multiple backgrounds">Multiple backgrounds</a></li>
</ul>
<div>
  {{ languages({ "de": "de/CSS/background-position", "fr": "fr/CSS/background-position", "pl": "pl/CSS/background-position", "es": "es/CSS/background-position", "ja": "ja/CSS/background-position", "pt":"pt/CSS/background-position"}) }}</div>
Revert to this revision