Open In App

How to define the painting area of the background in CSS?

Improve
Improve
Like Article
Like
Save
Share
Report

The task is to define the painting area of the background. The CSS background-clip property has a tendency to square measure victimization to outline the painting space of any net page’s background. It specifies that up to that extent, we will modify the background of the webpage in terms of its contents or images/videos it contains.

Syntax:

background-clip: border-box/padding-box/content-box/initial/inherit;

Values this property contains:

There square measure principally five values of this property for various functions and let’s examine what and the way they work.

Value

Description

border-box This worth is ready by default conjointly once there’s no declaration, and it specifies the painting space behind the border.
padding-box It specifies the painting space to be among the border not over it.  
content-box It specifies the painting space to be solely among the content we’ve written.
initial  Whatever be the property worth declared earlier it simply set it once more to its default worth suggests that border-box worth.
inherit  It works because it has named it inherits the painting space of its parent component.

Examples:

Using property values:

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            /* This sets CSS property of the border to
             be styled dashed and in green color with yellow
             background having certain padding too */
            border: 20px dashed green;
            padding: 15px;
            background: yellow;
        }
    </style>
</head>
 
<body>
    <h1>Example for background-clip Property</h1>
 
    <div style="background-clip: border-box;">
        <!--This sets background-clip property to be border-box-->
        <h4>This value is set by default also when there is
            no declaration and it specifies the painting
            area behind the border.</h4>
    </div>
 
 
    <p>background-clip: padding-box:</p>
 
    <div style="background-clip: padding-box;">
        <!--This sets background-clip property to be padding-box-->
        <h4>It specifies the painting area to
            be within the border not over it.</h4>
    </div>
 
    <p>background-clip: content-box:</p>
 
    <div style="background-clip: content-box;">
        <!--This sets background-clip property to be content-box-->
        <h4>
              It specifies the painting g area to be only
            within the content we have written.
          </h4>
    </div>
</body>
</html>


Output:

Using JavaScript to flip the values:

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        #GFG {
            /* This sets CSS property of the div which id is GFG to
            be styled dashed and in green color with black background
            having certain padding with background-clip to be
            border-box by default*/
            width: 50%;
            height: 400px;
            padding: 15px;
            background-color: black;
            background-clip: border-box;
            border: 20px dashed green;
        }
    </style>
</head>
 
<body>
    <h1>Flip background-clip with JavaScript</h1>
    <!--These buttons works as per the onclick function
        given to it and display the content accordingly-->
    <button onclick="myFunctionC()" style="width:200px;
                     height:50px;
                     background-color: black;
                     color:white">
        Let's Change to content-box
    </button>
    <br><br>
    <button onclick="myFunctionP()" style="width:200px;
                     height:50px;
                     background-color: black;
                     color:white">
        Let's Change to padding-box
    </button>
    <br><br>
    <button onclick="myFunctionI()" style="width:200px;
                     height:50px;
                     background-color: black;
                     color:white">
        Let's back to initial
    </button>
    <br><br>
    <div id="GFG">
    </div>
 
    <script>
        /* These are the functions which will be triggered when the
           corresponding button will be clicked and sets the
           CSS background-clip property accordingly */
        function myFunctionC() {
            document.getElementById(
                "GFG").style.backgroundClip = "content-box";
        }
 
        function myFunctionP() {
            document.getElementById(
                "GFG").style.backgroundClip = "padding-box";
        }
 
        function myFunctionI() {
            document.getElementById(
                "GFG").style.backgroundClip = "initial";
        }
    </script>
</body>
</html>


Output:



Last Updated : 06 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads