Javascript Reference - HTML DOM Style backgroundClip Property

The backgroundClip property sets or gets the painting area of the background.

Browser Support


`backgroundClip`	Yes	9	Yes	Yes	Yes

Syntax

Return the backgroundClip property:

var v = object.style.backgroundClip

Set the backgroundClip property:

object.style.backgroundClip=border-box|padding-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:	border-box
Return Value:	A string representing the background-clip property
CSS Version	CSS3

Example

The following code shows how to set the painting area of the background.


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!--  ww  w.j ava 2  s.c o  m-->
    width: 300px;
    height: 200px;
    padding: 50px;
    background-color: red;
    background-clip: border-box;
    color: white;
    border: 5px dotted black;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>

<div id="myDIV">
test <br/>test <br/>test <br/>test <br/>test <br/>
test <br/>test <br/>test <br/>test <br/>
test <br/>test <br/>test <br/>test <br/>
test <br/>test <br/>test <br/>test <br/>
test <br/>test <br/>test <br/>
</div>

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

</body>
</html>

The code above is rendered as follows: