Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 13 Apr, 2021

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-boxThis worth is ready by default conjointly once there’s no declaration, and it specifies the painting space behind the border.
padding-boxIt specifies the painting space to be among the border not over it.  
content-boxIt 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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :