Skip to content
Related Articles

Related Articles

HTML | DOM Style backgroundOrigin Property
  • Difficulty Level : Basic
  • Last Updated : 29 Jul, 2019

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"

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(
            no-repeat;
            background-size: 100px;
            background-origin: content-box;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </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">
        GeeksforGeeks 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:
    padding-before
  • After clicking the button:
    padding-after

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

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(
            no-repeat;
            background-size: 100px;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </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">
        GeeksforGeeks 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:
    border-before
  • After clicking the button:
    border-after

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

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(
            no-repeat;
            background-size: 100px;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </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">
        GeeksforGeeks 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:
    content-before
  • After clicking the button:
    content-after

initial: It is used to set this property to its 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(
            no-repeat;
            background-size: 100px;
            background-origin: content-box;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </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">
        GeeksforGeeks 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:
    initial-before
  • After clicking the button:
    initial-after

inherit: It inherits the property from its parent element.

Example:




<!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(
            no-repeat;
            background-size: 100px;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </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">
            GeeksforGeeks 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:
    alt=”inherit-before” width=”479″ height=”345″ class=”alignnone size-full wp-image-947844″ />
  • After clicking the button:
    inherit-after

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

  • Google Chrome 4.0
  • Internet Explorer 9.0
  • Firefox 4.0
  • Opera 10.5
  • Safari 3.0
My Personal Notes arrow_drop_up
Recommended Articles
Page :