Javascript DOM CSS Style backgroundOrigin Property

Introduction

Position the background image relative to the content box:

document.getElementById("myDIV").style.backgroundOrigin = "content-box";

Click the button to set the background-origin property of the DIV element to "content-box":

View in separate window

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {/*from   w  w  w .j  a v  a  2  s.  com*/
  border: 1px solid black;
  width: 300px;
  height: 150px;
  padding: 35px;
  background: url('background2.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.
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.
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 backgroundOrigin property sets or gets what the background-position property is relative to.

If the background-attachment property is "fixed", this property has no effect.

Property Values

Value	Description
padding-box	`Default`. The background image is positioned relative to the padding box
border-box	The background image is positioned relative to the border box
content-box	The background image is positioned relative to the content box
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

The backgroundOrigin property returns a String representing the background-origin property of an element.

Previous Next