CODEWITHSUNDEEP
css
Alan H.
Alan H.

Reputation: 16608

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

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

Answers (2)

BoltClock
BoltClock

Reputation: 724582

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

Upvotes: 27

Abhranil Das
Abhranil Das

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

Related Questions