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

css

Solution

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

Problem

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?

Original source

Related problems