The background-clip CSS property determines if the element’s background components: image or color extends underneath its border, padding or content.

Values of the background-clip property

border-box | padding-box | content-box

The initial value is border-box.

border-box

The background components (an image, a color) extend from under the outer edge of the element’s border.

background-clip: border-box;

See the Pen background-clip: border-box; by majadc (@majadc) on CodePen.

padding-box

The background components (an image, a color) extend from under the element’s padding not border.

background-clip: padding-box;

See the Pen background-clip: padding-box; by majadc (@majadc) on CodePen.

content-box

The background elements (an image, a color) are painted in the element’s content area, not underneath border or padding.

background-clip: content-box;

See the Pen background-clip: content-box; by majadc (@majadc) on CodePen.

text

The background elements (an image, color) are painted within the foreground text;

See the Pen background-clip: text; by majadc (@majadc) on CodePen.

Related

• background
• background-image
• background-position
• background-size
• background-repeat
• background-origin
• background-clip
• background-attachment
• background-color

Resources

• CSS3 Spec
• MDN