background-origin

  • Revision slug: CSS/background-origin
  • Revision title: background-origin
  • Revision id: 28765
  • Created:
  • Creator: Spanglerco
  • Is current revision? No
  • Comment

Revision Content

{{template.CSSMozExtensionRef()}}

Summary

In Mozilla applications, -moz-background-origin determines how the {{template.Cssxref("background-position")}} property is determined:

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

-moz-background-origin is similar to the standard CSS 3 {{template.Cssxref("background-origin")}} property, but {{template.Cssxref("background-origin")}} is currently not supported. For now, use -moz-background-clip.

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;
  -moz-background-origin: content; /* The background will be inside the padding */
}

Revision Source

<p> 
{{template.CSSMozExtensionRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p>In Mozilla applications, <code>-moz-background-origin</code> determines how the {{template.Cssxref("background-position")}} property is determined:
</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 similar to the standard CSS 3 {{template.Cssxref("background-origin")}} property, but {{template.Cssxref("background-origin")}} is currently not supported. For now, use <code>-moz-background-clip</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;
  -moz-background-origin: content; /* The background will be inside the padding */
}
</pre>
Revert to this revision