Definition:
CSS background-clip specifies how far the background image or color should extend within an element.
Property Values are:
background-clip:
content-box
border-box
padding-box
initial
inherit
Syntax:
background-clip: content-box;
background-clip: border-box;
background-clip: padding-box;
background-clip: initial;
background-clip: inherit;
1) background-clip:content-box;
<!DOCTYPE html>
<html>
<head>
<style>
#background_clip{
border: 10px dashed black;
padding: 25px;
background-color: pink;
background-clip:content-box;
}
</style>
</head>
<body>
<div id="background_clip">
<h1>Here is an example of background-clip: content-box</h1>
</div>
</body>
</html>
Result:
Here is an example of background-clip: content-box
2) background-clip:border-box;
<!DOCTYPE html>
<html>
<head>
<style>
#background_clip{
border: 10px dashed black;
padding: 25px;
background-color: pink;
background-clip:border-box;
}
</style>
</head>
<body>
<div id="background_clip">
<h1>Here is an example of background-clip: border-box</h1>
</div>
</body>
</html>
Result:
Here is an example of background-clip: border-box
3) background-clip:padding-box;
<!DOCTYPE html>
<html>
<head>
<style>
#background_clip{
border: 10px dashed black;
padding: 25px;
background-color: pink;
background-clip:padding-box;
}
</style>
</head>
<body>
<div id="background_clip">
<h1>Here is an example of background-clip: padding-box</h1>
</div>
</body>
</html>
Result:
Here is an example of background-clip: padding-box
4) background-clip:initial;
<!DOCTYPE html>
<html>
<head>
<style>
#background_clip{
border: 10px dashed black;
padding: 25px;
background-color: pink;
background-clip:initial;
}
</style>
</head>
<body>
<div id="background_clip">
<h1>Here is an example of background-clip: initial</h1>
</div>
</body>
</html>
Result:
Here is an example of background-clip: initial
5) background-clip: inherit;
<!DOCTYPE html>
<html>
<head>
<style>
#background_clip{
border: 10px dashed black;
padding: 25px;
background-color: pink;
background-clip:inherit;
}
</style>
</head>
<body>
<div id="background_clip">
<h1>Here is an example of background-clip: inherit</h1>
</div>
</body>
</html>
Result:
Here is an example of background-clip: inherit
Donate to support writers.
You may be interested in the following topics:
- CSS background-size
- CSS background-repeat-y
- CSS background-repeat-x
- CSS background-repeat
- CSS background-position-y
- CSS background-position-x
- CSS background-position
- CSS background-origin
- CSS background-image
- CSS background-color
- CSS background-clip
- CSS background-blend-mode
- CSS background-attachment
- CSS Background (All Properties)