HTML - DOM Style Object backgroundOrigin Property

Quiz

HTML DOM Style Object backgroundOrigin property sets or returns the relative position of background image with respect to padding, border and content.

Syntax

Given below are the syntax to get or set the backgroundOrigin property.

Set the backgroundOrigin property:

object.style.backgroundOrigin= "padding-box | border-box | content-box | initial | inherit";

Get the backgroundOrigin property:

object.style.backgroundOrigin;

Property Values

Value	Description
padding-box	It is the default value which positions the background image relative to padding box on the top left.
border-box	It positions the background image relative to border box on the top left.
content-box	It positions the background image relative to content box of the element.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents background-origin property of an element.

Example of HTML DOM Style Object 'backgroundOrigin' Property

The following example illustrates different property values of backgroundOrigin property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object backgroundClip Property
    </title>
    <style>
        #origin {
            width: 400px;
            height: 300px;
            padding: 150px;
            border: 1px solid black;
            background: url('/html/images/logo.png') no-repeat;
        }
    </style>
</head>
<body>
    <p>
        Click to try different background image positioning..
    </p>
    <button onclick="content()">Content</button>
    <button onclick="padding()">Padding</button>
    <button onclick="border()">Border</button>
    <div id="origin">Here is some random text to bore you...
        HTML DOM Style Object backgroundClip property 
        sets or returns the painting area of the background.
    </div>
    <script>
        function content() {
            document.getElementById("origin")
            .style.backgroundOrigin = "content-box";
        }
        function padding() {
            document.getElementById("origin")
            .style.backgroundOrigin = "padding-box";
        }
        function border() {
            document.getElementById("origin")
            .style.backgroundOrigin = "border-box";
        }
    </script>
</body>
</html>

Supported Browsers

Property
backgroundOrigin	Yes 1	Yes 12	Yes 4	Yes 3	Yes 10.5

html_dom.htm

Print Page