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:
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(
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>
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(
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>
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(
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>
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(
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>
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(
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>
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