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

MozBackgroundOrigin style property | webkitBackgroundOrigin style property

Browser support:
MozBackgroundOrigin
webkitBackgroundOrigin
Specifies or retrieves how the backgroundPosition property is determined, i.e. it defines the reference point that the backgroundImage is relative to.

Syntax:

object.MozBackgroundOrigin;
object.webkitBackgroundOrigin;
You can find the related objects in the Supported by objects section below.
MozBackgroundOrigin: This property is read/write.
webkitBackgroundOrigin: This property is read/write.
CSS page for this property: -moz-background-origin

Possible values:

The type of this property is string.
 One of the following values: 
border
The position is relative to the border.
content
The position is relative to the content.
inherit
Takes the value of this property from the computed style of the parent element.
padding
The position is relative to the padding.
Default: border.

Example HTML code 1:

This example illustrates the use of the -moz-background-origin and the -webkit-background-origin properties:
<head>
    <style>
        .bgOriginBorder {
            background-image: url("bg.jpg");
            background-repeat: no-repeat;
            background-position: left top;
            width: 200px;
            height: 60px;
            padding: 10px;
            border: 8px solid #ffac84;
            
            -moz-background-origin: border;
            -webkit-background-origin: border;
        }
        .bgOriginPadding {
            background-image: url("bg.jpg");
            background-repeat: no-repeat;
            background-position: left top;
            width: 200px;
            height: 60px;
            padding: 10px;
            border: 8px solid #ffac84;
            
            -moz-background-origin: padding;
            -webkit-background-origin: padding;
        }
        .bgOriginContent {
            background-image: url("bg.jpg");
            background-repeat: no-repeat;
            background-position: left top;
            width: 200px;
            height: 60px;
            padding: 10px;
            border: 8px solid #ffac84;
            
            -moz-background-origin: content;
            -webkit-background-origin: content;
        }
    </style>
</head>
<body>
    <div class="bgOriginBorder">
        background-origin: border
    </div>
    <br />
    <div class="bgOriginPadding">
        background-origin: padding
    </div>
    <br />
    <div class="bgOriginContent">
        background-origin: content
    </div>
</body>
Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the MozBackgroundOrigin and webkitBackgroundOrigin properties in JavaScript:
<head>
    <style>
        .example {
            height: 150px;
            margin: 50px;
            padding: 10px;
            width: 300px;
            border: 20px dotted black;
            background-image: url("bg.jpg");
            -moz-background-origin: content;
        }
    </style>

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

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

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

            if ('MozBackgroundOrigin' in div.style) {
                div.style.MozBackgroundOrigin = bgOrigin;
            } else if ('webkitBackgroundOrigin' in div.style) {
                div.style.webkitBackgroundOrigin = bgOrigin;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <div id="myDiv" class="example">
        -moz-background-origin: content;
    </div>

    <select onchange="ChangeBgOrigin (this);" size="3">
        <option selected="selected" />content
        <option />border
        <option />padding
    </select>
</body>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content