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-boxis the default value. This allows the background to extend all the way to the outside edge of the element's border.padding-boxclips the background at the outside edge of the element's padding and does not let it extend into the border.content-boxclips the background at the edge of the content box.inheritapplies thebackground-clipsetting 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.
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 |