CSS background-clip Property
The background-clip property in CSS asserts whether the background of an element extends underneath the border-box, content-box or the padding-box.
Since the root element has a different background painting area, so the background-clip property has no effect when it is specified on it.
In case, the computed value of the background image on the root element is none and the background color is transparent, then the user should instead propagate the computed values of the background properties from the first HTML <body> child element of the element.
The used values of that element's <body> background properties are the initial values for them. And if the element is having no background image or background color, then this property will have only a visual effect while the border is having transparent regions.
Syntax for background-clip property:
Following is the syntax for the background-clip property.
<box> where <box> = border-box | padding-box | content-box
CSS background-clip property values:
Let's see what values this property can have and what does those values do:
|
Value
|
Description
|
|
border-box
|
In this case, the background extends to the outside corner of the border but underneath the border in the z-ordering.
|
|
padding-box
|
In this case, the background extends to the outside corner of the padding and there is no background drawn beneath the border.
|
|
content-box
|
In this case, the background gets painted in the content box.
|
|
text
|
In this case, the background gets painted in the foreground text.
|
Example 1: CSS background-clip Property
In the example below, we are using the background-clip property with different background colors, borders, and different values.
In this case, we have given the background-clip of the object as border-box, padding-box, content-box, and text.
The CSS is embedded inside the html code within the starting and closing <style> tags.
<!DOCTYPE html>
<html>
<head>
<title>Background-clip</title>
<style type="text/CSS">
p {
border: .8em darkviolet;
border-style: dotted double;
margin: 1em 0;
padding: 1.4em;
background: linear-gradient(60deg, red, yellow, red, yellow, red);
font: 900 1.2em sans-serif;
text-decoration: underline;
}
.border-box { background-clip: border-box; }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }
.text {
background-clip: text;
-webkit-background-clip: text;
color: rgba(0,0,0,.2);
}
</style>
</head>
<body>
<p class="border-box">The background extends behind the border.</p>
<p class="padding-box">The background extends to the inside edge of the border.</p>
<p class="content-box">The background extends only to the edge of the content box.</p>
<p class="text">The background is clipped to the foreground text.</p>
</body>
</html>
Output:
Example 2: CSS background-clip Property
In the example below, we are using the background-clip property with different background colors, borders, and different values. We have given the background-clip of the object as a border-box.
<!DOCTYPE html>
<html>
<head>
<title>Background-clip</title>
<style type="text/CSS">
p {
border: .8em darkviolet;
border-style: dotted double;
margin: 1em 0;
padding: 1.8em;
background: linear-gradient(60deg, black, red, black, red, black);
font: 900 1.2em sans-serif;
text-decoration: underline;
}
.border-box { background-clip: border-box;
}
</style>
</head>
<body>
<p class="border-box">The background extends behind the border.</p>
</body>
</html>
Output:
Example 3: CSS background-clip Property
In the example below, we are using the background-clip property with different background colors, borders, and different values. We have given the background-clip of the object as a padding-box.
<!DOCTYPE html>
<html>
<head>
<title>Background-clip</title>
<style type="text/CSS">
p {
border: .8em darkviolet;
border-style: dotted double;
margin: 1em 0;
padding: 1.8em;
background: linear-gradient(60deg, black, red, black, red, black);
font: 900 1.2em sans-serif;
text-decoration: underline;
}
.padding-box {
background-clip: padding-box;
}
</style>
</head>
<body>
<p class="border-box">The background extends to the inside edge of the border.</p>
</body>
</html>
Output:
Live Example:
Here in this live example, you can test the code and execute the example using different values or even edit the code example.
Browser Compatibility
There are many browsers which do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
1 |
1 |
| Edge |
12 |
12 |
| Firefox |
4 |
4 |
| Internet Explorer |
9 |
9 |
| Opera |
10.5 |
10.5 |
| Safari |
3 |
3 |
| Webview Android |
4.1 |
4.1 |
| Chrome Android |
18 |
18 |
| Firefox Android |
14 |
14 |
| Opera Android |
11 |
11 |
| IOS Safari |
1 |
1 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
The default value for the background-clip property is border-box. It is applicable to all elements. It is also applicable to ::first-letter and ::first-line. It is not an inherited property. The computed value for this property is the specified one. And the animation type for this property is discrete.
