AWS Amplify - the fastest, easiest way to develop mobile and web apps that scale.
background-clip
lets you control how far a background image or color extends beyond an element’s padding or content.
.frame {
background-clip: padding-box;
}
Values
border-box
is the default value. This allows the background to extend all the way to the outside edge of the element’s border.padding-box
clips the background at the outside edge of the element’s padding and does not let it extend into the border.content-box
clips the background at the edge of the content box.inherit
applies thebackground-clip
setting of the parent to the selected element.
Demos
background-clip
is best explained in action, so we’ve put together two demos to show how it works.
In the first demo, each div has one paragraph inside it. The paragraph is the div’s content. Each div has a yellow background and a 5 pixel, semi-transparent light blue border.
See the Pen background-clip by CSS-Tricks (@css-tricks) on CodePen.
By default, or with background-clip: border-box
set, the yellow background extends all the way to the outside edge of the border. Notice how the border looks like it’s green because of the yellow background beneath it.
When the background-clip
is changed to padding-box
, the background color stops where the element’s padding ends. Notice that the border is blue because the background isn’t allowed to bleed into the border.
With background-clip: content-box
, the background color only applies itself to the div’s content, in this case the single paragraph element. The div’s padding and border don’t have a background color. But, there’s one little detail worth mentioning: the color does extend into the content’s margin. Check out the differences between the first and second examples with content-box
.
In the first content-box
example, the browser’s default margins are applied to the paragraph, and the background clips after the margin. In the second example, the margin is set to 0 in the CSS, and the background is clipped at the edge of the text.
This next interactive shows background-clip
with a background image. The content in this demo is a smaller empty div.
See the Pen background-clip interactive example by Timothy Miller (@tjacobdesign) on CodePen.
This demo also applies background-size: cover
and background-repeat: no-repeat
in addition to background-clip
to control the background image, which would otherwise repeat until clipping.
Text
There is a vendor-prefixed version of this that works for clipping a background to text. In order to see that work, the text will also need to be transparent. Fortunately, there is another vendor-prefixed text color property that can effectively override color
, making it safe to use as it can have a fallback:
.background-clip-text {
/* if we can clip, do it */
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
/* what will show through the text
~ or ~
what will be the background of that element */
background: whatever;
/* fallback text color
~ or ~
the actual color of text, so it better work on the background */
color: red;
}
Firefox, Chrome, and Safari support this.
See the Pen
Lit text by Chris Coyier (@chriscoyier)
on CodePen.
Related
- background-attachment
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
More Resources
Browser Support
All clear!
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
1+ | 3+ | 4+ | 10.5+ | 9+ | 4.1+ | Works |
“text” has been added as allowed value.
Yeah! And is a awesome feature, Chris could update this article.