How to define the painting area of the background in CSS?
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;" >
< 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;" >
< 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;" >
< 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 >
< 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
Share your thoughts in the comments
Please Login to comment...