mozilla

Revision 28774 of background-origin

  • Revision slug: CSS/background-origin
  • Revision title: background-origin
  • Revision id: 28774
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 163 words added, 92 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.

  • {{ 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;
}

Specifications

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 supports also the synonym values  border-box | padding-box | content-box.

See also

{{ cssxref("-moz-background-clip") }}

{{ 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><code>-moz-background-origin </code>does not apply when {{ Cssxref("background-attachment") }} is<code> <code>fixed</code></code>.</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>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)</li>
</ul>
<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 supports also the synonym values <code> border-box | padding-box | content-box</code>.</li>
</ul>
<h3>See also</h3>
<p>{{ cssxref("-moz-background-clip") }}</p>
<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