9

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?

Alan H.
  • 16,219
  • 17
  • 80
  • 113

2 Answers2

27

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

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 1
    Thanks. Crazy. I understand shortcut properties & exactly how this works, but given that the `background` shortcut property has been around *forever*, it was pretty much inconceivable to me that it was expanded/redefined to now include properties that didn’t even use to exist! – Alan H. May 04 '12 at 21:07
  • @Alan H.: Well, the thing is, CSS is versioned in *levels*, where new features are added and sometimes existing ones refined — so when new properties are added, it's only appropriate that the new versions of shorthand properties are expanded to include those new properties. See also: http://www.w3.org/TR/CSS/#css-levels Likewise, some *selectors* like `:not()` will also be enhanced to accept a wider range of selectors in CSS4. – BoltClock May 05 '12 at 05:04
  • See also: [Is CSS3 an official standard?](http://stackoverflow.com/questions/8637901/is-css3-an-official-standard/8637917#8637917) – BoltClock Jun 15 '12 at 16:23
3

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.

Abhranil Das
  • 5,702
  • 6
  • 35
  • 42