CSS background-clip
CSS is all about presentation. Discover how CSS background-clip works to transform plain HTML into a premium user experience in the guide below.
This CSS property specifies the painting area of the background. It limits the area in which the background color or image appears by applying a clipping box. Anything outside the box will be discarded and invisible.
It determines if the element's background should extend beneath the border-box, padding-box, or content-box.
Syntax
background-clip: border-box| padding-box| content-box| inherit;
Possible values
Let's explore the values of properties with an example for each one.
border-box
It represents the initial value, indicating that the background image and color will be displayed within the border-box. This property establishes the background color that extends across the entire element.
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: yellow;
background-clip: border-box;
text-align: center;
border:5px dotted blue;
}
h1,h2{
color: red;
}
</style>
</head>
<body>
<div>
<h1>
Welcome to the C# Tutorial
</h1>
<h2>
background-clip: border-box;
</h2>
</div>
</body>
</html>
padding-box
It sets the background within the border, i.e., the background image and color are drawn inside the padding-box.
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: yellow;
background-clip: padding-box;
padding: 25px;
text-align: center;
border:5px dashed blue;
}
h1,h2{
color: red;
}
</style>
</head>
<body>
<div>
<h1>
Welcome to the C# Tutorial
</h1>
<h2>
background-clip: padding-box;
</h2>
</div>
</body>
</html>
content-box
It specifies the background-color limited to the content area exclusively. The background is filled within the content box itself, meaning that the background image and color will be displayed within the content box.
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: yellow;
background-clip: content-box;
padding: 15px;
text-align: center;
border:5px dashed blue;
}
h1,h2{
color: red;
}
</style>
</head>
<body>
<div>
<h1>
Welcome to the C# Tutorial
</h1>
<h2>
background-clip: content-box;
</h2>
</div>
</body>
</html>
