mozilla

Revision 28782 of background-origin

  • Revision slug: CSS/background-origin
  • Revision title: background-origin
  • Revision id: 28782
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment CSS3 module is no longer WD; Opera 10.5 added to browser compat table; 56 words added, 31 words removed

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") }} shorthand property.

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

Syntax

-moz-background-origin:  <bg-origin>[, <bg-origin>]*

Where:

<bg-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;
           background-origin: content-box;
}
div {
  background-image: url('mainback.png'), url('logo.jpg');
  background-position: 0px 0px, top right;
  -moz-background-origin: padding, content;
  -webkit-background-origin: padding, content;
          background-origin: padding-box, content-box;
}

Browser compatibility

Browser Lowest version Support of
Internet Explorer --- --- [*]
Firefox (Gecko) 1.0 (1.2) -moz-background-origin: padding | border | content
Opera 10.5 background-origin: padding-box | border-box | content-box
Safari (WebKit) 3.0 (522) -webkit-background-origin: padding | border | content
-webkit-background-origin: padding-box | border-box | content-box
  • [*]  IE up to version 7 defaults to  background-origin: border;
  • IE 8 default behaviour is  background-origin: padding;
  • 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") }} 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:  &lt;bg-origin&gt;[, &lt;bg-origin&gt;]*
</pre>
<p>Where:</p>
<dl> <dt>&lt;bg-origin&gt;</dt> <dd><code>border | padding | content</code></dd>
</dl>
<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;
           background-origin: content-box;
}
</pre>
<pre>div {
  background-image: url('mainback.png'), url('logo.jpg');
  background-position: 0px 0px, top right;
  -moz-background-origin: padding, content;
  -webkit-background-origin: padding, content;
          background-origin: padding-box, content-box;
}</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>10.5</td> <td><code>background-origin: padding-box | border-box | content-box</code></td> </tr> <tr> <td>Safari (WebKit)</td> <td>3.0 (522)</td> <td><code>-webkit-background-origin: padding | border | content </code><br> <code>-webkit-background-origin: padding-box | border-box | content-box</code></td> </tr> </tbody>
</table>
<ul> <li>[*]  IE up to version 7 defaults to <code> background-origin: border;</code></li> <li>IE 8 default behaviour is <code> background-origin: padding;</code><code><br> </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><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