Revision 48577 of -moz-background-inline-policy

  • Revision slug: CSS/-moz-background-inline-policy
  • Revision title: -moz-background-inline-policy
  • Revision id: 48577
  • Created:
  • Creator: Ttocsmij
  • Is current revision? No
  • Comment clarified nature of problem and offered solution; 93 words added, 4 words removed

Revision Content

{{ CSSMozExtensionRef() }}

Summary

In Gecko-based applications like Firefox, the -moz-background-inline-policy CSS property specifies how the background image of an inline element is determined when the content of the inline element wraps onto multiple lines. The choice of position has significant effects on repetition.

  • {{ Xref_cssinitial() }}: continuous
  • Applies to: inline elements
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

-moz-background-inline-policy:  bounding-box | continuous | each-box

Values

bounding-box 
The background image is positioned (and repeated) in the smallest rectangle that contains all of the inline boxes for the element. It is then clipped to be visible only within those boxes, according to the {{ Cssxref("-moz-background-clip") }} property.
continuous
The background image is positioned (and repeated) as if the inline box were not broken across lines, and then this long rectangle is sliced into pieces for each line.
each-box
The background image is positioned (and repeated) separately for each box of the inline element. This means that an image with {{ Cssxref("background-repeat") }}: no-repeat may be repeated multiple times.

Examples

Notes

-moz-background-inline-policy is supported since Gecko 1.3 (Firefox 1.0).

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

Revision Source

<p>{{ CSSMozExtensionRef() }}</p>
<h3>Summary</h3>
<p>In <a href="/en/Gecko" title="en/Gecko">Gecko</a>-based applications like Firefox, the<code> -moz-background-inline-policy </code>CSS property specifies how the background image of an inline element is determined when the content of the inline element wraps onto multiple lines. The choice of position has significant effects on repetition.</p>
<ul> <li>{{ Xref_cssinitial() }}: <code>continuous</code></li> <li>Applies to: inline elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<h3>Syntax</h3>
<pre>-moz-background-inline-policy:  bounding-box | continuous | each-box
</pre>
<h3>Values</h3>
<dl> <dt>bounding-box </dt> <dd>The background image is positioned (and repeated) in the smallest rectangle that contains all of the inline boxes for the element. It is then clipped to be visible only within those boxes, according to the {{ Cssxref("-moz-background-clip") }} property.</dd> <dt>continuous</dt> <dd>The background image is positioned (and repeated) as if the inline box were not broken across lines, and then this long rectangle is sliced into pieces for each line.</dd> <dt>each-box</dt> <dd>The background image is positioned (and repeated) separately for each box of the inline element. This means that an image with {{ Cssxref("background-repeat") }}: <code>no-repeat</code> may be repeated multiple times.</dd>
</dl>
<h3>Examples</h3>
<ul> <li><a class="external" href="http://developer.mozilla.org/samples/cssref/moz-background-inline-policy-example.html"><strike>Example showing the values of <code>-moz-background-inline-policy</code></strike></a> <br> [The example background image URL (<span style="color: rgb(153, 51, 0);"><span style="font-size: small;"><span style="font-family: Helvetica;"><span class="sourceRowText "><a class=" external" href="http://developer.mozilla.org/wiki-images/en/a/a6/Repeatable-diagonal-gradient-background.png" rel="freelink">http://developer.mozilla.org/wiki-im...background.png</a></span></span></span></span>) on the example page is 404. I used the <span style="color: rgb(153, 51, 0);"><span style="font-size: small;"><span style="font-family: Helvetica;"><span class="sourceRowText ">https://developer.mozilla.org/skins/mozilla/Fox3/img/mdc-logo.png</span></span></span></span><span class="sourceRowText "> image instead and the example page worked just fine. I would fix the example page but do not have access to edit that page on-line.</span>]</li> <li><a class="external" href="http://hixie.ch/tests/adhoc/css/background/inline/policy/" title="http://hixie.ch/tests/adhoc/css/background/inline/policy/">hixie.ch/tests/adhoc/css/background/inline/policy/</a></li>
</ul>
<h3>Notes</h3>
<p><code>-moz-background-inline-policy </code>is supported since Gecko 1.3 (Firefox 1.0).</p>
<p>{{ languages( { "fr": "fr/CSS/-moz-background-inline-policy", "ja": "ja/CSS/-moz-background-inline-policy", "pl": "pl/CSS/-moz-background-inline-policy" } ) }}</p>
Revert to this revision