CSS: background clip

background-clip

background-clip

The area for the image to fill.

any of

• border-box (default)
• padding-box
• content-box
• text → reveals text color through background. need to set color: transparent;

• CSS: Box Sizing
• CSS: padding

.x {
 background-clip: border-box;

 background-clip: padding-box;

 background-clip: content-box;
}

.x {
 background-clip: text;
 color: transparent; /* reveals text color through background */
}

example

example. padding-box

.xclip-padding-box-gtcdJ {
 background-image: url("i/venus_comb_32m-s289x217.jpg");
 background-repeat: repeat;
 background-clip: padding-box;
 width: 150px;
 height: 150px;
 color: red;
 border: dotted 20px red;
 padding: 0.5rem;
}

example. border-box

.xclip-border-box-gtcdJ {
 background-image: url("i/venus_comb_32m-s289x217.jpg");
 background-repeat: repeat;
 background-clip: border-box;
 width: 150px;
 height: 150px;
 color: red;
 border: dotted 20px red;
 padding: 0.5rem;
}

example. content-box

.xclip-content-box-gtcdJ {
 background-image: url("i/venus_comb_32m-s289x217.jpg");
 background-repeat: repeat;
 background-clip: content-box;
 width: 150px;
 height: 150px;
 color: red;
 border: dotted 20px red;
 padding: 0.5rem;
}

example. text

.xclip-text-gtcdJ {
 background-image: url("i/venus_comb_32m-s289x217.jpg");
 background-repeat: repeat;
 background-clip: text;
 width: 150px;
 height: 150px;
 color: transparent;
 font-size: 7rem;
 font-weight: bold;
 padding: 0;
}