background-clip

Property Variable Name

background-clip

Available Values for background-clip

border-box|padding-box|content-box|initial|inherit

Example using background-clip border-box

Here is an example using background-clip:border-box;

Code

<style>
.demo-box-1 {
  padding:20px;
  border-radius:3px;
  margin-bottom:10px;
  border:5px dashed #FFF;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  background-color:#FFF;
  background:url(https://css.kruxor.com/images/pexels-photo-4279015.jpeg), url(https://css.kruxor.com/images/pexels-photo-3207527.jpeg);
  background-size:cover;
  background-clip:border-box;
}
</style>
<h2>Example using background-clip border-box</h2>
<p>Here is an example using <code>background-clip:border-box;</code></p>
<div class='demo-box-1'>
</div>

Example using background-clip padding-box

Here is an example using background-clip:padding-box;

Code

<style>
.demo-box-2 {
  padding:20px;
  border-radius:3px;
  margin-bottom:10px;
  border:5px dashed #FFF;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  background-color:#FFF;
  background:url(https://css.kruxor.com/images/pexels-photo-4279015.jpeg), url(https://css.kruxor.com/images/pexels-photo-3207527.jpeg);
  background-size:cover;
  background-clip:padding-box;
}
</style>
<h2>Example using background-clip padding-box</h2>
<p>Here is an example using <code>background-clip:padding-box;</code></p>
<div class='demo-box-2'>
</div>

Example using background-clip content-box

Here is an example using background-clip:content-box;

Code

<style>
.demo-box-3 {
  padding:20px;
  border-radius:3px;
  margin-bottom:10px;
  border:5px dashed #FFF;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  background-color:#FFF;
  background:url(https://css.kruxor.com/images/pexels-photo-4279015.jpeg), url(https://css.kruxor.com/images/pexels-photo-3207527.jpeg);
  background-size:cover;
  background-clip:content-box;
}
</style>
<h2>Example using background-clip content-box</h2>
<p>Here is an example using <code>background-clip:content-box;</code></p>
<div class='demo-box-3'>
</div>

Example using background-clip initial

Here is an example using background-clip:initial;

Code

<style>
.demo-box-4 {
  padding:20px;
  border-radius:3px;
  margin-bottom:10px;
  border:5px dashed #FFF;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  background-color:#FFF;
  background:url(https://css.kruxor.com/images/pexels-photo-4279015.jpeg), url(https://css.kruxor.com/images/pexels-photo-3207527.jpeg);
  background-size:cover;
  background-clip:initial;
}
</style>
<h2>Example using background-clip initial</h2>
<p>Here is an example using <code>background-clip:initial;</code></p>
<div class='demo-box-4'>
</div>

Example using background-clip inherit

Here is an example using background-clip:inherit;

Code

<style>
.demo-box-5 {
  padding:20px;
  border-radius:3px;
  margin-bottom:10px;
  border:5px dashed #FFF;
  height:220px;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  background-color:#FFF;
  background:url(https://css.kruxor.com/images/pexels-photo-4279015.jpeg), url(https://css.kruxor.com/images/pexels-photo-3207527.jpeg);
  background-size:cover;
  background-clip:inherit;
}
</style>
<h2>Example using background-clip inherit</h2>
<p>Here is an example using <code>background-clip:inherit;</code></p>
<div class='demo-box-5'>
</div>