CSS background-clip Property
Whether a background (color, image, or gradient) stops at the border, the padding or the content is decided by the CSS background-clip property.
Three values describe where painting ends:
border-box- Painting runs all the way under the border, which is what you get if you set nothing.padding-box- Painting ends where the border begins, on its inner edge.content-box- Painting stays inside the content box, up to its edge.
Background clip with image
A background image clipped three ways with background-clip:
Prompt
Show three divs with a dotted border and padding, each using a background image (paper.gif) with a different background-clip value: border-box, padding-box, and content-box.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS background-clip with Image</title>
<style>
#div1 {
border: 5px dotted black;
padding: 35px;
background-image: url("paper.gif");
background-clip: border-box;
}
#div2 {
border: 5px dotted black;
padding: 35px;
background-image: url("paper.gif");
background-clip: padding-box;
}
#div3 {
border: 5px dotted black;
padding: 35px;
background-image: url("paper.gif");
background-clip: content-box;
}
div {
margin-bottom: 15px;
}
</style>
</head>
<body>
<h2>background-clip: border-box (default):</h2>
<div id="div1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<h2>background-clip: padding-box:</h2>
<div id="div2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<h2>background-clip: content-box:</h2>
<div id="div3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</body>
</html>
Background clip with color
The same three background-clip values, this time on a background color:
Prompt
Show three divs with a dotted border and padding, each using a lightblue background color with a different background-clip value: border-box, padding-box, and content-box.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS background-clip with Color</title>
<style>
#div1 {
border: 5px dotted black;
padding: 35px;
background-color: lightblue;
background-clip: border-box;
}
#div2 {
border: 5px dotted black;
padding: 35px;
background-color: lightblue;
background-clip: padding-box;
}
#div3 {
border: 5px dotted black;
padding: 35px;
background-color: lightblue;
background-clip: content-box;
}
div {
margin-bottom: 15px;
}
</style>
</head>
<body>
<h2>background-clip: border-box (default):</h2>
<div id="div1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<h2>background-clip: padding-box:</h2>
<div id="div2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<h2>background-clip: content-box:</h2>
<div id="div3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</body>
</html>
CSS Advanced Background Properties
These advanced properties make up the CSS background family:
background- Shorthand that sets every background property in a single declaration.background-clip- Decides the area in which the background gets painted.background-image- Gives an element one or several background images.background-origin- Sets the starting point for positioning the background image(s).background-size- Controls how large the background image(s) appear.