My attempt to use background-clip: content-box
is failing. The entire box has a background, including the padding area, not just the content area.
http://jsfiddle.net/alanhogan/7YjCV/6/
What am I doing wrong?
The “background-clip: text” is supported in all main browsers with the Webkit prefix, it allows a background image to be clipped by a text element. In this guide we will look at examples using the background-clip property and the different values you can use.
The background-origin property determines where the background is placed (defaulting to padding-box) while the background-clip determines what part of the background is shown (defaulting to border-box). The properties can be used together or independently.
The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.
How to Add Background Color in HTML. To add background color in HTML, use the CSS background-color property. Set it to the color name or code you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a table, heading, div, or span tag.
This is a common gotcha with shorthand properties in CSS.
Because background-clip
is one of the properties that's set by the background
shorthand property, your background
style is implicitly setting background-clip
to border-box
(its initial value), overriding your explicit background-clip
style:
background-clip: content-box;
background: #ddd none /* border-box */;
If you move your background-clip
declaration beneath background
, it'll work as expected:
background: #ddd none;
background-clip: content-box;
jsFiddle demo
The background
CSS property is a one-line way to define all background properties, including background-clip
. Thus, specifying background: #ddd
unsets your earlier setting of background-clip
. If instead you replace that line with background-color: #ddd
, it should work the way you want it to.
Here's the small modification to your jsfiddle.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With