CSS Background Clip

CSS Background Clip

The CSS background-clip property controls how far an element's background is painted within its box.

An element's background normally extends underneath its border. The background-clip property can restrict the background to the border box, padding box, or content box without changing the size or position of the element itself.

The Background Painting Area

The background painting area determines how far an element's background color and background images are allowed to extend.

The background-clip property provides three commonly used box values:

The element's border and padding remain in place regardless of which value is used. Only the area where the background is painted changes.

border-box

The initial value of background-clip is border-box. The background extends to the outside edge of the border box.

.box {
  border: 12px dashed steelblue;
  background-color: lightblue;
  background-clip: border-box;
}

Because the background is painted underneath the border, it can be visible through transparent portions of a dashed, dotted, or partially transparent border.

padding-box

The padding-box value stops the background at the outside edge of the padding box.

.box {
  border: 12px dashed steelblue;
  background-color: lightblue;
  background-clip: padding-box;
}

The background still appears behind the content and padding, but it is no longer painted underneath the border.

With a dashed border, the difference from border-box is particularly easy to see because the page background becomes visible through the spaces between the dashes.

content-box

The content-box value restricts the background to the element's content box.

.box {
  padding: 40px;
  border: 12px dashed steelblue;
  background-color: lightblue;
  background-clip: content-box;
}

The padding and border areas are not painted with the background. With generous padding, the smaller content-only background area is easy to identify.

Comparing background-clip Values

The three values correspond to the same box-model areas used by background-origin, but they control painting rather than positioning.

Background Colors and Images

The clipping area applies to an element's background, including its background color and background images.

.box {
  background-color: lightblue;
  background-image: url("images/leaves-400x400.png");
  background-repeat: no-repeat;
  background-clip: content-box;
}

In this example, both the background color and the visible portions of the background image are clipped to the content box.

This allows the same clipping behavior to be used with solid colors, photographs, patterns, transparent images, and gradients.

Background Origin vs Background Clip

background-origin and background-clip use similar box values, but they control different parts of the background.

.box {
  background-origin: content-box;
  background-clip: padding-box;
}

In this example, a background image is positioned relative to the content box while the background is allowed to paint through the padding box.

Background Clip Example

The following example uses three boxes with identical borders, padding, and background colors. Only the background-clip value changes.

.border-box {
  background-clip: border-box;
}
.padding-box {
  background-clip: padding-box;
}
.content-box {
  background-clip: content-box;
}

Compare how far the light blue background extends in each box. The dashed border makes the difference between border-box and padding-box visible, while the large padding clearly shows the effect of content-box.