background-origin

  • Revision slug: CSS/background-origin
  • Revision title: background-origin
  • Revision id: 28779
  • Created:
  • Creator: MarkusStange
  • Is current revision? No
  • Comment noting that the background shorthand will reset this property; 23 words added

Revision Content

{{ CSSMozExtensionRef() }}

Summary

In Mozilla applications like Firefox, the -moz-background-origin CSS property determines the background positioning area (the origin of a background-image).

-moz-background-origin does not apply when {{ Cssxref("background-attachment") }} is fixed.

This property is reset to its initial value by the {{ Cssxref("background-attachment") }} shorthand property.

  • {{ Xref_cssinitial() }}: {{ Cssxref("padding") }}
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

-moz-background-origin:  border | padding | content

Values

border
The background position is relative to the border, so the image can go behind the border.
padding
The background position is relative to the padding.
content
The background position is relative to the content.

Examples

 .example {
   border: 10px double;
   padding: 10px;
   background: url('image.jpg');
   background-position: center left;
   /* The background will be inside the padding */
   -moz-background-origin: content;
   -webkit-background-origin: content;
}

Browser compatibility

Browser Lowest version Support of
Internet Explorer --- --- [*]
Firefox (Gecko) 1.0 (1.2) -moz-background-origin: padding | border | content
Opera --- ---
Safari (WebKit) 3.0 (522) -webkit-background-origin: padding | border | content
  • [*]  IE up to version 7 defaults to background-origin:border. IE 8 default behaviour is background-origin:padding.
  • Safari/Webkit also supports the synonym values border-box | padding-box | content-box.
  • Konqueror 3.5.4 supports -khtml-background-origin.

Specifications

See also

  • {{ cssxref("-moz-background-size") }}, {{ cssxref("-moz-background-clip") }}
  • {{ CSS_Reference:Background() }}

{{ languages( { "fr": "fr/CSS/-moz-background-origin", "ja": "ja/CSS/-moz-background-origin", "pl": "pl/CSS/-moz-background-origin" } ) }}

Revision Source

<p>{{ CSSMozExtensionRef() }}</p>
<h3>Summary</h3>
<p>In Mozilla applications like Firefox, the<code> -moz-background-origin </code>CSS property determines the background positioning area (the origin of a background-image).</p>
<p style="text-align: justify;"><code>-moz-background-origin </code>does not apply when {{ Cssxref("background-attachment") }} is<code> <code>fixed</code></code>.</p>
<p>This property is reset to its initial value by the {{ Cssxref("background-attachment") }} shorthand property.</p>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("padding") }}</li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified<code><br> </code></li>
</ul>
<h3>Syntax</h3>
<pre>-moz-background-origin:  border | padding | content
</pre>
<h3>Values</h3>
<dl> <dt>border</dt> <dd>The background position is relative to the border, so the image can go behind the border.</dd> <dt>padding</dt> <dd>The background position is relative to the padding.</dd> <dt>content</dt> <dd>The background position is relative to the content.</dd>
</dl>
<h3>Examples</h3>
<pre> .example {
   border: 10px double;
   padding: 10px;
   background: url('image.jpg');
   background-position: center left;
   /* The background will be inside the padding */
   -moz-background-origin: content;
   -webkit-background-origin: content;
}
</pre>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest version</th> <th>Support of</th> </tr> <tr> <td>Internet Explorer</td> <td>---</td> <td>--- [*]</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.2)</td> <td><code>-moz-background-origin: padding | border | content</code></td> </tr> <tr> <td>Opera</td> <td>---</td> <td>---</td> </tr> <tr> <td>Safari (WebKit)</td> <td>3.0 (522)</td> <td><code>-webkit-background-origin: padding | border | content</code></td> </tr> </tbody>
</table>
<ul> <li>[*]  IE up to version 7 defaults to<code> background-origin:border</code>. IE 8 default behaviour is<code> background-origin:padding</code>.</li> <li>Safari/Webkit also supports the synonym values<code> border-box | padding-box | content-box</code>.</li> <li>Konqueror 3.5.4 supports<code> -khtml-background-origin</code>.</li>
</ul>
<h3>Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/css3-background/#background-origin" title="http://www.w3.org/TR/css3-background/#background-origin">CSS 3 Background and borders #background-origin</a> Working draft (not yet ready).<br> Specifies the values<code> border-box | padding-box | content-box.</code></li>
</ul>
<h3>See also</h3>
<ul> <li>{{ cssxref("-moz-background-size") }}, {{ cssxref("-moz-background-clip") }}</li> <li>{{ CSS_Reference:Background() }}</li>
</ul>
<p>{{ languages( { "fr": "fr/CSS/-moz-background-origin", "ja": "ja/CSS/-moz-background-origin", "pl": "pl/CSS/-moz-background-origin" } ) }}</p>
Revert to this revision