Javascript Reference - HTML DOM Style backgroundOrigin Property

The backgroundOrigin property sets or gets what the background-position property is relative to.

Browser Support


`backgroundOrigin`	Yes	10	Yes	Yes	Yes

Syntax

Return the backgroundOrigin property:

var v = object.style.backgroundOrigin

Set the backgroundOrigin property:

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

Property Values

Value	Description
border-box	The background color and image are drawn within the border box.
padding-box	The background color and image are drawn within the padding box.
content-box	The background color and image are drawn within the content box.

Technical Details

Default Value:	padding-box
Return Value:	A string representing the background-origin property
CSS Version	CSS3

Example

The following code shows how to position the background image relative to the content box.


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!-- w w w. java2s. c  om-->
    border: 1px solid black;
    width: 300px;
    height: 150px;
    padding: 35px;
    background: url('http://java2s.com/style/demo/border.png') no-repeat;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>

<div id="myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
consequat.
</div>

<script>
function myFunction() {
    document.getElementById("myDIV").style.backgroundOrigin = "content-box";
}
</script>

</body>
</html>

The code above is rendered as follows: