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

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

MozBackgroundClip style property | webkitBackgroundClip style property

Browser support:

MozBackgroundClip

webkitBackgroundClip

Sets or retrieves which part of background is visible.

This property is useful if you don't want to create a borderStyle that is part of the background. Use it with a transparent borderStyle (dotted, dashed, etc.).

Syntax:

object.MozBackgroundClip;
object.webkitBackgroundClip;

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

MozBackgroundClip:	This property is read/write.
webkitBackgroundClip:	This property is read/write.

CSS page for this property: -moz-background-clip

Possible values:

The type of this property is string.

One of the following values:

border

The background extends into the border of the element.

inherit

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

padding

The background does not extend into the border.

Default: border.

Example HTML code 1:

This example illustrates the use of the -moz-background-clip and the -webkit-background-clip properties:

<head>
    <style>
        .bgClipBorder {
            height: 50px;
            width: 200px;
            border: 10px dotted red;
            background: green;
            padding-top: 20px;

            -moz-background-clip: border;
            -webkit-background-clip: border;
        }

        .bgClipPadding {
            width: 200px;
            height: 50px;
            border: 10px dotted red;
            background: green;
            padding-top: 20px;

            -moz-background-clip: padding;
            -webkit-background-clip: padding;
        }
    </style>
</head>
<body>
    <div class="bgClipBorder">background-clip: border</div>
    <br />
    <div class="bgClipPadding">background-clip: padding</div>
</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 MozBackgroundClip and webkitBackgroundClip properties in JavaScript:

<head>
    <style>
        .example {
            height: 150px;
            border: 10px dotted red;
            padding: 50px;
            width: 300px;
            background: green;
            -moz-background-clip: padding;
        }
    </style>

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

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

            var div = document.getElementById ("myDiv");

            if ('MozBackgroundClip' in div.style) {
                div.style.MozBackgroundClip = bgClipType;
            } else if ('webkitBackgroundClip' in div.style) {
                div.style.webkitBackgroundClip = bgClipType;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <div class="example" id="myDiv">test mozBackgroundClip</div>

    <select onchange="ChangeBgClip (this);" size="2">
        <option selected="selected" />padding
        <option />border
    </select>
</body>