The background-clip property extends the background inside the element.
The clipping can extend to the content-box, padding-box, or border-box.
A background with background-clip set to padding-box.
The border is visible, but padding and content are covered by the background.
<style>
.clip {
height: 250px;
padding: 25px;
border: 10px solid moccasin;
background-image: url("/img/css/sunflowers.jpg");
background-clip: padding-box;
}
</style>
<div class="clip"></div>
background-clip: border-box | padding-box |
content-box | initial | inherit;
| Value | Description |
|---|---|
| content-box | Extends background to the content edge. |
| padding-box | Extends background to include padding. |
| border-box | Default. Extends background behind the border. |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different background-clip values.
<style>
.clip-example {
height: 250px;
border: 25px solid rgba(255, 228, 181, .5);
padding: 25px;
background-image: url("/img/css/sunflowers.jpg");
background-clip: content-box;
}
</style>
<div class="clip-example"></div>
This table shows when background-clip support started for each browser.
 Chrome
|
4.0 | Jan 2010 |
 Firefox
|
4.0 | Mar 2011 |
 IE/Edge
|
9.0 | Mar 2011 |
 Opera
|
10.5 | Mar 2010 |
 Safari
|
3.0 | Jun 2007 |
