You are here: Reference > CSS > properties > browser specific extensions > -moz-background-origin

-moz-background-origin property | -webkit-background-origin property

Browser support:
-moz-background-origin:
-webkit-background-origin:
Specifies how the background-position property is determined, i.e. it defines the reference point that the background-image is relative to.
JavaScript page for this property: MozBackgroundOrigin | webkitBackgroundOrigin. You can find other example(s) there.

Possible values:

 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

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content