CSS Reference Property

background-clip

The background-clip property specifies the area within which the background is painted.

An element in CSS has 3 areas, called boxes, defined inside it: the border box, the padding box, and the content box.
There’s also a fourth area called the margin box which includes the element and its outer margin.

box-areas
Box areas of an element.

The background of an element is usually painted across and within the entire border box area. This results in the fact that the background is drawn beneath the border of an element. This is the default behavior in CSS.

The background-clip property can be used to clip the background to one of the three box areas inside an element. When one box area is specified in the property, the background is clipped to the area of the specified box and will not extend beyond that area.

The background-clip property can also take comma-separated values so that when the element has more than one background image, each value is applied to a corresponding background image (first value for the first image, second value for the second image, and so on). See the examples below.

Official Syntax

  • Syntax:

    background-clip: border-box | padding-box | content-box
    
  • Initial: border-box
  • Applies To: all elements
  • Animatable: no

Values

border-box
The background is painted within (clipped to) the border box. It extends all the way to the outer edge of the border.
padding-box
The background is painted within (clipped to) the padding box. This means that no background is drawn below the border.
content-box
The background is painted within (clipped to) the content box.

Notes

Note that the background is always drawn behind the border, if any.

The root element (html) has a different background painting area, and thus the background-clip property has no effect when specified on it.

Examples

These are all valid background-clip declarations:

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
                

The following example draws the first background image all within the content box and the second background image within the border box;

.element {
    background-image: url(path/to/first/image.jpg), url(path/to/second/image.png);
    background-clip: content-box, border-box;
}
                

Live Demo

This is a live demo of the background-clip property:

View this demo on the Codrops Playground

Browser Support

CSS3 Background-image options

New properties to affect background images, including background-clip, background-origin and background-size

W3C Candidate Recommendation

Supported from the following versions:

Desktop

  • 15
  • 4
  • 9
  • 10
  • 7

Mobile / Tablet

  • 7.0
  • 4.4
  • all
  • 66
  • 60

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by

Last updated June 11, 2020 at 10:13 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.