Why can’t I seem to use background-clip?

Question

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:

Answer 1

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: #ffffd none /* border-box */;

If you move your background-clip declaration beneath background, it'll work as expected:

background: #ffffd none;
background-clip: content-box;

jsFiddle demo