backgroundOrigin Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:backgroundOrigin

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. backgroundOrigin

Description

The backgroundOrigin property sets or gets where the background-position property is at.

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

Property Values

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

Technical Details

Item Value
Default Value: padding-box
Return Value: A String, representing the background-origin property of an element
CSS VersionCSS3

Position the background image relative to the content box:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {/*from  w w  w.  ja va2s.c  o  m*/
    border: 1px solid black;
    width: 300px;
    height: 150px;
    padding: 35px;
    background: url('http://java2s.com/resources/a.png') no-repeat;
}
</style>
</head>
<body>

<p>Click the "Try it" button to set the background-origin property of the DIV element to "content-box":</p>

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

Related Tutorials