Background clip

Syntax

Class
Properties
bg-clip-border
background-clip: border-box;
bg-clip-padding
background-clip: padding-box;
bg-clip-content
background-clip: content-box;
bg-clip-text
background-clip: text;
<div class="t1 w-256 h-256 shadow-4 p-16 b-16-dashed-black-30 font-32 color-white font-bold bg-center bg-clip-border" style="background-image: url(/assets/tree.jpg?o1-cache=1);"> Lorem ipsum dolor sit amet, consectetur </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Apply the background to the border-box, that is, including the border.
t1 bg-clip-border
.t1.bg-clip-border { background-clip: border-box; }
Apply the background to the padding-box, that is, include the padding but not the border.
t1 bg-clip-padding
.t1.bg-clip-padding { background-clip: padding-box; }
Apply the background to the content-box, that is, excluding the padding and the border.
t1 bg-clip-content
.t1.bg-clip-content { background-clip: content-box; }
Apply the background to the containing text only.
t1 bg-clip-text
.t1.bg-clip-text { background-clip: text; }