HTML | DOM Style backgroundOrigin Property

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:

  • Before clicking the button:
    initial-before
  • After clicking the button:
    initial-after

inherit: It inherits the property from its parent element.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


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

Technical Writer Lets have an update

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.