CSS background-clip Property

The background-clip CSS property specifies the area within which the background is painted on an element. The background can be either a color or image.

The initial value of background-clip property is border-box. You can apply it to all elements. It also applies to ::first-letter and ::first-line. This property is neither inheritable nor animatable. The transition between different values will be sudden.

If there is no background image or the background has been specified as a color, this property will only have a visual effect when the border has transparent regions or partially opaque regions, otherwise the border will cover up the difference.

Syntax

This is the formal syntax for using background-clip property —

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

Here are some examples of using this property —

/* Keyword values */
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

Acceptable Values

border-box

In this case, the background extends to the outside edge of the element’s border. However, it is still drawn underneath the border because of z-ordering.

padding-box

In this case, the background background extends to the outside edge of the padding. In other words, no background is drawn below the border.

content-box

In this case, the background is painted within or clipped to the content box.

text

This is an unofficial value in which the background is painted within (clipped to) the foreground text. It only works in Chrome.

Examples

See the Pen CSS background-clip Property by Tutorialio (@tutorialio) on CodePen.

Browser Support

The CSS3 background-image options property (or properties like background-clip, background-origin and background-size that affect background images) is fully supported in 93.3% browsers and partially supported in 4.49% browsers. Therefore, its overall browser support is 97.79%.

This property is partially supported in Firefox 3.6+, Chrome 4+, Safari 4+, Opera 10.0-10.1+, iOS Safari 3.2+ and Android 3+. This property is fully supported in IE 9+, Edge 12+, Firefox 4+, Chrome 15+, Safari 7+, Opera 11+, iOS Safari 8+, Android 53+ and Chrome for Android 55+.

  • Safari also supports the unofficial -webkit-background-clip: text (only with prefix).
  • iOS Safari has buggy behavior with background-size: cover; on a page’s body.
  • iOS Safari has buggy behavior with background-size: cover; + background-attachment: fixed;.
  • Safari (OS X and iOS) and Chrome do not support background-size: 100% px; in combination with SVG images, it leaves them at the original size while other browsers stretch the vector image correctly while leaving the height at the specified number of pixels.
  • Android 4.3 browser and below are reported to not support percentages in background-size.

The browser stats and issues were taken from caniuse.com

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top