CSS background-clip

The background-clip CSS property specifies the area that is painted by the background. It affects background images/gradients and color, which by default paint the border-box. The border-box includes the content, padding and behind any border (only visible for non-solid borders). The padding-box excludes the border and the content-box is just the content area. In other words, the names refer to the outer edge of the background area.

background-clip: border-box|padding-box|content-box
background-clip: content-box;
background-clip: content-box, border-box;    /* two images, different clipping */

When working with multiple background images, separate values with commas to set a different clipping for each. This allows, for example, to paint padding and content areas with different backgrounds. The last value from the list is applied to the background-color.

Browser Support: Full.

background-clip Basics

There's not much science involved here. Simply set a background image and/or color. background-clip will affect the painting area of both.

.example {
padding: 30px; background-color: LightBlue; background-image: url('wood.jpg'); background-clip: content-box;

The background property is shorthand for all the background related properties.

background: color position size repeat origin clip attachment image

The equivalent of the example above using the shorthand would be:

background: LightBlue content-box url('path');

The Boxes

The background of an element by default paints the border area (border-box). It often goes unnoticed because the background is behind the border, which means it's not visible if the border is solid.

The padding-box excludes the border and the content-box is the smallest, limited to the content area. There's no way to make the background paint the margin area other than wrapping an element around. The following element has a dashed orange border and green background to make the difference clear.


Multiple Background Images

Elements with multiple background images can have a different clipping setting for each. Comma separate values for them to be applied to the respective layer from the background-image list. For example:

.example {
padding: 30px; background-color: green; background-image: url('drops.jpg'), url('wood.jpg'); background-clip: content-box, padding-box;

The last rule is always applied to the background color. To set background-clip for the background color when you also have images, add a an empty image to the list with the none keyword.

background-origin for Alignment

The background-origin property sets the reference for positioning the background. It may take the same values as background-clip. By default the background is at the top left corner of the padding-box. When setting background-clip to content-box the background may appear misaligned if the element has some padding. To avoid it set background-origin to content-box as well.

.example {
padding: 30px; background-color: #4c9ee3; background-image: url('duck.png'); background-repeat: repeat-x; background-position: right bottom; background-clip: content-box; background-origin: content-box;

background-clip: text

The text value is an experimental feature of background-clip, available in Webkit browsers through -webkit-background-clip:text. It clips the background against the text, effectively adding a background to the text only:

background-clip text example

The problem is that this value is not part of the CSS3 Specification and is unlikely to be implemented in most browsers soon. Besides, the image is shown in full in browsers that don't support the value. If you still want to implement it, the best solution is testing for browser support. Keep in mind that it won't be possible to add a real background image or color (clipped to the background area) to the same element, because the property affects all those.

Useful Resources

One comment

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>