CSS Background-clip
CSS Background-clip: The background-clip property describes the background’s painting area. It limits an area where the image or color of the background appears by using any clipping box. Everything will be invisible or discarded, which is outside of the box.
It sets, if an element’s background spreads under the content-box, padding-box, and border-box.
Syntax:
background-clip: border-box| padding-box| content-box| inherit;
Property Values
The possible values are discussed below:
border-box
It is used as a default value. The border-box specifies that the color and image of the background will be designed within a border-box. It also sets the color of the background, which spreads on the entire distribution.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
background-color: lightblue;
background-clip: border-box;
text-align: center;
border: 5px dashed navy;
}
h1,h2
{
color: navy;
}
</style>
</head>
<body>
<div>
<h1> Welcome to this Page </h1>
<h2> background-clip: border-box; </h2>
</div>
</body>
</html>
Output:
padding-box
It is used to address the background inside the border. The color and image of the background are designed within a padding-box.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
background-color: lightblue;
background-clip: padding-box;
padding: 25px;
text-align: center;
border: 5px dotted navy;
}
h1,h2
{
color: navy;
}
</style>
</head>
<body>
<div>
<h1> Welcome to this Page </h1>
<h2> background-clip: padding-box; </h2>
</div>
</body>
</html>
Output:
content-box
The content-box value is used to set the color of the background only up to any content. In this, the backgrounds are drawn within a content-box. The color and image of the background will be designed within a content-box.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
background-color: lightblue;
background-clip: content-box;
padding: 25px;
text-align: center;
border: 5px dashed navy;
}
h1,h2
{
color: navy;
}
</style>
</head>
<body>
<div>
<h1> Welcome to this Page </h1>
<h2> background-clip: content-box; </h2>
</div>
</body>
</html>
Output:
