HTML - DOM Style Object backgroundClip Property

Quiz

HTML DOM Style Object backgroundClip property sets or returns the painting area of the background.

Syntax

Given below are the syntax to get or set the backgroundClip property.

Set the backgroundClip property:

object.style.backgroundClip= "border-box | padding-box | content-box | initial | inherit" ;

Get the backgroundClip property:

object.style.backgroundClip;

Property Values

Value	Description
border-box	It is the default value which clips background till border of the box.
padding-box	It clips the background til padding of the box.
content-box	It clips the background til content of the box.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents background-clip property of an element.

Example of HTML DOM Style Object 'backgroundClip' Property

The following example illustrates backgroundClip property to specify the painting area using diiferent property values.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object backgroundClip Property
    </title>
    <style>
        #clip {
            width: 400px;
            height: 300px;
            padding: 150px;
            background-color: #04af2f;
            background-clip: border-box;
            color: white;
            border: 3px dotted black;
        }
    </style>
</head>
<body>
    <p>
        Click to try different background clipping.
    </p>
    <button onclick="content()">Content Clip</button>
    <button onclick="border()">Border Clip</button>
    <button onclick="padding()">Padding Clip</button>
    <div id="clip">Here is some random text to bore you...</div>
    <script>
        function content() {
            document.getElementById("clip")
            .style.backgroundClip = "content-box";
        }
        function border() {
            document.getElementById("clip")
            .style.backgroundClip = "border-box";
        }
        function padding() {
            document.getElementById("clip")
            .style.backgroundClip = "padding-box";
        }
    </script>
</body>
</html>

Supported Browsers

Property
backgroundClip	Yes 1	Yes 12	Yes 4	Yes 5	Yes 10.5

html_dom.htm

Print Page