W3C home > Mailing lists > Public > www-style@w3.org > January 2011

Re: Expected behavior of background-clip property on the html element?

From: Alan Gresley <alan@css-class.com>
Date: Wed, 12 Jan 2011 01:16:34 +1100
Message-ID: <4D2C6642.6090109@css-class.com>
To: Philippe Wittenbergh <ph.wittenbergh@l-c-n.com>
CC: Boris Zbarsky <bzbarsky@MIT.EDU>, Cathy.Chan@nokia.com, www-style@w3.org
On 11/01/2011 11:53 PM, Philippe Wittenbergh wrote:
>
> On Jan 6, 2011, at 2:46 PM, Boris Zbarsky wrote:
>
>>> When I try this on the major browsers, all show the green background
>>> well beyond the bottom border. Additionally, content-box behaves exactly
>>> the same as either border-box (Chrome, FF, Safari) or padding-box
>>> (Opera). Which is correct? I'm guessing neither, but it's not
>>> immediately clear from the spec.
>>
>> I suspect the key part here is this, from http://www.w3.org/TR/CSS21/colors.html#background :
>>
>>   The background of the root element becomes the background
>>   of the canvas and covers the entire canvas, anchored (for
>>   'background-position') at the same point as it would be if it was
>>   painted only for the root element itself. The root element does
>>   not paint this background again.
>>
>> So the background isn't being painted on the box for the<html>  to start with, hence it would seem that the
>> background-clip of the<html>  box wouldn't apply, unless something somewhere explicitly says otherwise.


What about clipping to the <body> since a background-color on the <body> 
is propagated to the viewport?


> Hmm, when I try this with 'content-box', it seems to work with a recent WebKit nightly (with the -webkit- prefix).
> http://dev.l-c-n.com/CSS3_border-background/background-clip_root-element.html
>
> I sure can see your point about the background-color; but what about a background-image?
>
>
>
> Philippe


No go in IE9 either. All browsers tested (that I have) apply this 
clipping for any descendant of <body>,


div {
   border: 10px dotted blue;
   padding: 20px;
   background: lime url(image.png);
   -webkit-background-clip: content-box;
   -moz-background-clip: content-box;
   -o-background-clip: content-box;
   background-clip: content-box; /* IE9 un-prefixed */
}


but will not do the same for <body>.



-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
Received on Tuesday, 11 January 2011 14:17:14 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:35 GMT