background-origin

  • Revision slug: CSS/background-origin
  • Revision title: background-origin
  • Revision id: 28769
  • Created:
  • Creator: DBaron
  • Is current revision? No
  • Comment /* Examples */

Revision Content

{{template.CSSMozExtensionRef()}}

Summary

In Mozilla applications, -moz-background-origin determines which box establishes the coordinate system used by the values of the {{template.Cssxref("background-position")}} property:

  • Initial value: padding
  • Applies to: all elements
  • Inherited: no

-moz-background-origin is an experimental implementation of the proposed CSS 3 {{template.Cssxref("background-origin")}} property, which has not yet reached Candidate Recommendation (call for implementations).

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

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

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

Known bugs

-moz-background-origin: content does not account correctly for percentage padding.

Revision Source

<p> 
{{template.CSSMozExtensionRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p>In Mozilla applications, <code>-moz-background-origin</code> determines which box establishes the coordinate system used by the values of the {{template.Cssxref("background-position")}} property:
</p>
<ul><li> Initial value: padding
</li><li> Applies to: all elements
</li><li> Inherited: no
</li></ul>
<p><code>-moz-background-origin</code> is an experimental implementation of the proposed CSS 3 {{template.Cssxref("background-origin")}} property, which has not yet reached Candidate Recommendation (call for implementations).
</p><p><code>-moz-background-origin</code> does not apply when {{template.Cssxref("background-attachment")}} is <code>fixed</code>.
</p>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">-moz-background-origin: border | padding | content
</pre>
<h3 name="Values"> 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 name="Examples"> Examples </h3>
<pre>hbox.example {
  border: 10px double #000000;
  padding: 10px;
  background: url('image.jpg');
  background-position: center left;
  /* The background will be inside the padding */
  -moz-background-origin: content;
}
</pre>
<h3 name="Known_bugs"> Known bugs </h3>
<p><code>-moz-background-origin: content</code> does not account correctly for percentage padding.
</p>
Revert to this revision