The CSS background-clip property defines how far the background should extend with an element. Here the background can be a color or an image. It is one of the CSS3 properties.
Note: If the image had no background-color or background-image, then this property only has a visual effect.
- This property allows only the following values.
- border-box
- padding-box
- content-box
- text
- initial
- inherit
Characteristics of Background-clip Property:
| Initial value | border-box |
| Applies to | All elements. It also applies to ::first-letter and ::first-line |
| Inherited | No |
| Animatable | No |
| Version | CSS3 |
| JavaScript syntax | object.style.backgroundClip = "content-box"; |
Syntax:
background-clip: border-box | padding-box | content-box | text | initial | inherit;
Values:
| Value | Description |
|---|---|
| border-box | It is a default value. This value makes the background appears behind the border. |
| padding-box | The background appears inside the border. |
| content-box | It makes the background extend to the edge of the content box. |
| text | With this value, the background is painted within the foreground text. |
| initial | Sets the property to its default value. |
| inherit | Inherits the property from its parent element. |
Example of the background-clip property:
The following code use the background-clip property.
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example {
border: 3px solid #1B0031;
padding: 15px;
background: #DEBDFD;
background-clip: content-box;
}
</style>
</head>
<body>
<h2>Background-clip property example</h2>
<p>Here the "content-box" value is used.</p>
<div id="example">
<p>The background extends to the edge of the content box.</p>
</div>
</body>
</html>
Result:
After executing the above code, you will get the result as shown in the below image.
Example of the background-clip property with the “padding-box” & “border-box” values:
In the following code, we use the background-clip property with the padding-box and border-box values.
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example1 {
border: 5px dashed #007BB1;
padding: 15px;
background: #94DDFD;
background-clip: border-box;
}
#example2 {
border: 5px dashed #007BB1;
padding: 15px;
background: #94DDFD;
background-clip: padding-box;
}
</style>
</head>
<body>
<h2>Background-clip property example</h2>
<p>Here the background-clip is set to "border-box" (this is the default value).</p>
<div id="example1">
<p>The background extends behind the border.</p>
</div>
<p>Here the background-clip is set to "padding-box".</p>
<div id="example2">
<p>The background extends to the inside edge of the border.</p>
</div>
</body>
</html>
Result:
Now, you can get the result as shown in the below image.
Example of the background-clip property with the “text” value:
This following code shows the background-clip property with the text value.
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example {
border: 3px dashed #FD6301;
padding: 15px;
background: #000EE4;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<h2>Background-clip property example</h2>
<p>Here the background-clip is set to "text"</p>
<div id="example">
<p>The background is painted within the foreground text.</p>
</div>
</body>
</html>
Result:
By running the above code, you will get the output as shown in the below image.
Browser-Support:
Also Read:
- CSS background Property
- HTML Aside Tag
- HTML Body Tag
- CSS background-attachment Property
- CSS all Property
The post CSS background-clip property appeared first on Share Point Anchor.
Top comments (0)