HTML

The Style backgroundOrigin property in HTML DOM is used to determine what the background image is relative to in position. It may be made relative to the padding, border or the actual content.

Syntax:

It returns the backgroundOrigin property.

object.style.backgroundOrigin

It is used to set the backgroundOrigin property.

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

Return Values: It returns a string value, which representing the background-origin property of an element.

Property Values:

padding-box: This value positions the image relative to the padding edge on the top left. It is the default value.
border-box: This value positions the image relative to the border edge, which is the absolute top left.
content-box: This value positions the image relative to the beginning of the actual content of the element.
initial: It is used to set this property to its default value.
inherit: It inherits the property from its parent element.

padding-box: This value positions the image relative to the padding edge on the top left. It is the default value.

Example:

<!DOCTYPE html>
<html>
     
<head>
    <title>
        DOM Style backgroundOrigin Property
    </title>
     
    <style>
        .bg-img {
            height: 200px;
            width: 200px;
            padding: 10px;
            border: 10px dotted;
            margin-bottom: 10px;
            background: url(
'https://media.w3wiki.net/wp-content/uploads/20190311222622/sample-image.png')
            no-repeat;
            background-size: 100px;
            background-origin: content-box;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
        w3wiki
    </h1>
     
    <b>DOM Style backgroundOrigin Property</b>
     
    <p>
        Click on the button to change the origin 
        property of the background image to padding-box
    </p>
     
    <div class="bg-img">
        w3wiki contains well written, well
        thought and well explained computer science
        and programming articles, quizzes and
        practice questions.
    </div>
     
    <button onclick="changeOrigin()">
        Change backgroundOrigin
    </button>
 
    <!-- Script to change backgroundOrigin property -->
    <script>
        function changeOrigin() {
            elem = document.querySelector('.bg-img');
            elem.style.backgroundOrigin = 'padding-box';
        }
    </script>
</body>
 
</html>                    

Output:

Before clicking the button:

After clicking the button:

border-box: This value positions the image relative to the border edge, which is the absolute top left.

Example:

html

<!DOCTYPE html>
<html>
     
<head>
    <title>
        DOM Style backgroundOrigin Property
    </title>
     
    <style>
        .bg-img {
            height: 200px;
            width: 200px;
            padding: 10px;
            border: 10px dotted;
            margin-bottom: 10px;
            background: url(
'https://media.w3wiki.net/wp-content/uploads/20190311222622/sample-image.png')
            no-repeat;
            background-size: 100px;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
        w3wiki
    </h1>
     
    <b>DOM Style backgroundOrigin Property</b>
     
    <p>
        Click on the button to change the origin 
        property of the background image to padding-box
    </p>
     
    <div class="bg-img">
        w3wiki contains well written, well
        thought and well explained computer science
        and programming articles, quizzes and
        practice questions.
    </div>
     
    <button onclick="changeOrigin()">
        Change backgroundOrigin
    </button>
 
    <!-- Script to change backgroundOrigin property -->
    <script>
        function changeOrigin() {
            elem = document.querySelector('.bg-img');
            elem.style.backgroundOrigin = 'border-box';
        }
    </script>
</body>
 
</html>                    

Output:

Before clicking the button:

After clicking the button:

content-box: This value positions the image relative to the beginning of the actual content of the element.

Example:

html

<!DOCTYPE html>
<html>
     
<head>
    <title>
        DOM Style backgroundOrigin Property
    </title>
     
    <style>
        .bg-img {
            height: 200px;
            width: 200px;
            padding: 10px;
            border: 10px dotted;
            margin-bottom: 10px;
            background: url(
'https://media.w3wiki.net/wp-content/uploads/20190311222622/sample-image.png')
            no-repeat;
            background-size: 100px;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
        w3wiki
    </h1>
     
    <b>DOM Style backgroundOrigin Property</b>
     
    <p>
        Click on the button to change the origin 
        property of the background image to padding-box
    </p>
     
    <div class="bg-img">
        w3wiki contains well written, well
        thought and well explained computer science
        and programming articles, quizzes and
        practice questions.
    </div>
     
    <button onclick="changeOrigin()">
        Change backgroundOrigin
    </button>
 
    <!-- Script to change backgroundOrigin property -->
    <script>
        function changeOrigin() {
            elem = document.querySelector('.bg-img');
            elem.style.backgroundOrigin = 'content-box';
        }
    </script>
</body>
 
</html>                    

Output:

Before clicking the button:

After clicking the button:

initial: It is used to set this property to its default value.

Example:

html

<!DOCTYPE html>
<html>
     
<head>
    <title>
        DOM Style backgroundOrigin Property
    </title>
     
    <style>
        .bg-img {
            height: 200px;
            width: 200px;
            padding: 10px;
            border: 10px dotted;
            margin-bottom: 10px;
            background: url(
'https://media.w3wiki.net/wp-content/uploads/20190311222622/sample-image.png')
            no-repeat;
            background-size: 100px;
            background-origin: content-box;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
        w3wiki
    </h1>
     
    <b>DOM Style backgroundOrigin Property</b>
     
    <p>
        Click on the button to change the origin 
        property of the background image to padding-box
    </p>
     
    <div class="bg-img">
        w3wiki contains well written, well
        thought and well explained computer science
        and programming articles, quizzes and
        practice questions.
    </div>
     
    <button onclick="changeOrigin()">
        Change backgroundOrigin
    </button>
 
    <!-- Script to change backgroundOrigin property -->
    <script>
        function changeOrigin() {
            elem = document.querySelector('.bg-img');
            elem.style.backgroundOrigin = 'initial';
        }
    </script>
</body>
 
</html>                    

Output:

Before clicking the button:

After clicking the button:

inherit: It inherits the property from its parent element.

Example:

html

<!DOCTYPE html>
<html>
     
<head>
    <title>
        DOM Style backgroundOrigin Property
    </title>
     
    <style>
         
        /* Parent element */
        #parent {
            height: 250px;
            width: 250px;
            background-origin: border-box;
        }
 
        .bg-img {
            height: 200px;
            width: 200px;
            padding: 10px;
            margin-bottom: 50px;
            border: 10px dotted;
            background: url(
'https://media.w3wiki.net/wp-content/uploads/20190311222622/sample-image.png') 
            no-repeat;
            background-size: 100px;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
        w3wiki
    </h1>
     
    <b>
        DOM Style backgroundOrigin Property
    </b>
     
    <p>
        Click on the button to change the origin
        property of the background image to inherit
    </p>
     
    <div id="parent">
        <div class="bg-img">
            w3wiki contains well written, well
            thought and well explained computer
            science and programming articles, quizzes
            and practice questions.
        </div>
    </div>
 
    <button onclick="changeOrigin()">
        Change origin of background image
    </button>
 
    <!-- Script to change backgroundOrigin -->
    <script>
        function changeOrigin() {
            elem = document.querySelector('.bg-img');
            elem.style.backgroundOrigin = 'inherit';
        }
    </script>
</body>
 
</html>                    

Output:

Before clicking the button:

After clicking the button:

Supported Browsers: The browser supported by DOM Style backgroundOrigin property are listed below:

Google Chrome 1.0 and above
Edge 12 and above
Internet Explorer 9.0 and above
Firefox 4.0 and above
Opera 10.5 and above
Safari 3.0 and above

HTML | DOM Style backgroundOrigin Property

html

html

html

html

html

Contact Us