CSS background-clip property
The background-clip property in CSS controls the area within which a background image or color is painted. It defines how the background should be clipped relative to the box model of an element. This property is useful for creating visual effects where you need precise control over the background area relative to the element's content, padding, border, or margin.
Basic Usage
The basic syntax for the background-clip property is:
selector {
background-clip: value;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.example {
width: 200px;
height: 100px;
background-image: url('example.jpg');
background-clip: padding-box;
border: 5px solid black;
padding: 20px;
}
</style>
</head>
<body>
<div class="example"></div>
</body>
</html>
In this example, the background image will be clipped to the padding area of the element, so it will be visible within the padding but not extend into the border area.
Values for background-clip
1. border-box
- Description: The background is painted within the border box, meaning it extends to the outer edge of the border.
- Use Case: This is the default value. Use it when you want the background to cover the entire area including the border.
div {
background-clip: border-box;
}
2. padding-box
- Description: The background is painted within the padding box, meaning it stops at the edge of the padding, not extending into the border area.
- Use Case: Useful when you want the background to be visible only within the padding area, without extending into the border.
div {
background-clip: padding-box;
}
3. content-box
- Description: The background is painted within the content box, meaning it stops at the edge of the content area, not extending into the padding or border.
- Use Case: Useful when you want the background to be visible only within the content area of the element, excluding padding and borders.
div {
background-clip: content-box;
}
Practical Examples
Example 1: Background Clipping with Padding
<!DOCTYPE html>
<html>
<head>
<style>
.padding-box-example {
width: 200px;
height: 100px;
background-image: url('background.jpg');
background-clip: padding-box;
border: 5px solid black;
padding: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="padding-box-example"></div>
</body>
</html>
In this example, the background image is clipped to the padding area, so it appears within the padding but not under the border.
Example 2: Background Clipping to Content Area
<!DOCTYPE html>
<html>
<head>
<style>
.content-box-example {
width: 200px;
height: 100px;
background-image: url('background.jpg');
background-clip: content-box;
border: 5px solid black;
padding: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="content-box-example"></div>
</body>
</html>
Here, the background image is clipped to the content area, meaning it will not extend into the padding or border.
Interaction with Other Properties
background-origin: Determines the position of the background image relative to the element's box. It works in conjunction withbackground-clipto define where the background image is positioned.background-size: Affects how the background image is scaled, which interacts with how it is clipped according to thebackground-clipproperty.
Example: Combining background-clip with background-origin
div {
background-image: url('example.jpg');
background-size: cover;
background-origin: content-box;
background-clip: content-box;
}
In this example, the background image is sized to cover the content area and clipped to the content box, so it will only be visible within the content area of the element.