In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > browser specific extensions > MozBackgroundInlinePolicy

MozBackgroundInlinePolicy style property

Browser support:

Specifies or retrieves how the backgroundImage of an inline element is determined when the contents of the inline element wrap onto multiple lines.

Syntax:

object.MozBackgroundInlinePolicy;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: -moz-background-inline-policy

Possible values:

The type of this property is string.

One of the following values:

bounding-box

The backgroundImage is shown behind the entire element as a whole.

continuous

The backgroundImage wraps around on to each line as if the text had no line breaks.

each-box

The backgroundImage is shown behind each box as a whole in the current element.

inherit

Takes the value of this property from the computed style of the parent element.

Default: continuous.

Example HTML code 1:

This example illustrates the use of the -moz-background-inline-policy property:

<head>
    <style>
        .example {
            background: url("rainbow.gif");
            -moz-background-inline-policy: continuous;
            border: solid 2px black;
        }
    </style>
</head>
<body>
    <span class="example"> <strong>This element should have a rainbow
    background which follows it around, however much it wraps, so that
    it starts on red on the first line and gradually goes through
    yellow, orange, green, blue, indigo, and violet. If the inline is
    longer than the background, the background should start over. If
    each line starts again at red, then the test has failed.</strong>
    Filler text. Filler text. Filler text. Filler text. Filler text.
    Filler text. Filler text. Filler text. Filler text. Filler text.
    Filler text. Filler text. Filler text. Filler text.
    </span>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the MozBackgroundInlinePolicy property in JavaScript:

<head>
    <style>
        #mySpan {
            background: url("rainbow.gif");
            -moz-background-inline-policy: continuous;
            border: solid 2px black;
        }
    </style>

    <script type="text/javascript">
        function ChangeBgInlinePol (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the text of the selected option
            var bgLinePolType = selectTag.options[whichSelected].text;

            var span = document.getElementById ("mySpan");

            if ('MozBackgroundInlinePolicy' in span.style) {
                span.style.MozBackgroundInlinePolicy = bgLinePolType;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <span id="mySpan">
        <strong>This element should have a rainbow
            background which follows it around, however much it wraps, so that
            it starts on red on the first line and gradually goes through
            yellow, orange, green, blue, indigo, and violet. If the inline is
            longer than the background, the background should start over. If
            each line starts again at red, then the test has failed.
        </strong>
    </span>

    <br />
    <select onchange="ChangeBgInlinePol (this);" size="3">
        <option />bounding-box
        <option selected="selected" />continuous
        <option />each-box
    </select>
</body>