Reputation: 16608
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/
What am I doing wrong?
Upvotes: 9
Views: 9077
Reputation: 724592
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;
Upvotes: 27
Reputation: 5916
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.
Upvotes: 3