Re: [CSS Backgrounds] root element

On Nov 11, 2009, at 5:41 PM, fantasai wrote:

> Brad Kemper wrote:
>> I am seeing something in both WebKit and Firefox (Minefield)  
>> nightlies that I can't find an explanation for in the current  
>> Editor's Draft of Backgrounds and Borders.
>> The 'Special Elements' section [1] talks about applying how the  
>> HTML root can take background properties from the BODY, which as  
>> we've all experienced for background-color. The implication is that  
>> the HTML root fills the viewport (perhaps some other spec even says  
>> that somewhere explicitly), since background-color does so when set  
>> on either BODY or HTML in html documents.
>> But I can't see why  a 'background-repeat:no-repeat', 'background- 
>> size: 100% 100%' background-image doesn't fill the viewport,  
>> regardless of when using 'BODY', 'HTML', or ':root' as a selector.  
>> It only fills the height of the body element.
>> If I use 'position:fixed', oddly, then it does use the viewport for  
>> sizing and positioning the image, but only when applied to the root  
>> or the HTML element, but not when applied to the BODY.
>
> If you remove all background properties on HTML, then applying them
> to BODY should behave exactly as if they were specified on HTML. If
> you specify e.g. bgcolor on HTML, then you don't get that behavior;
> BODY will behave as a normal element, i.e. just like a DIV.

OK, so the 'background-attachment: fixed' trick does work consistently  
if I use the same selector as the rest of the background properties  
(either BODY or :root). Confirmed.

>> So am I missing something? Or is this a bug in both browsers? Or is  
>> further clarification needed about how BODY background properties  
>> get applied to the root?
>
> You're missing the first sentence of that section. See also  
> CSS2.1:14.2.

Oh, I did read all that in both places. It just didn't clarify to me  
what was going on. I'm probably suffering from some sort of mental  
deficiency.

> http://www.w3.org/TR/css3-background/#special-backgrounds
>
>  # The background of the root element becomes the background of the
>  # canvas and its background painting area  extends to cover the
>  # entire canvas,

OK, so the background of the root (HTML element) is the background of  
the canvas, and the canvas presumably fills the viewport. So,  
background-color also fills the viewport.

> although any images are sized and positioned
>  # relative to the root element as if they were painted for that
>  # element alone.

So, "any images" includes background images, and "that element" is the  
root element, and the root element is not necessarily as big as its  
background (which is canvas-sized)? When I read that, I assumed that  
"as if they were painted for that element alone" meant that they were  
painted for "that element" that now had a canvas-height background  
painting area, and would thus fill that area with the image. Since you  
are saying that that this first sentence holds my answer, I now  
understand you to be saying that :

Since "100% height" (for 'background-size') is based on the background  
positioning area, not on the height of the background painting area  
and it is only the background painting area that can grow to the size  
of the canvas, I shouldn't be expecting '100% height' to be the height  
of the canvas, because the background positioning area is still  
unchanged. [I do sometimes get positioning area and painting area  
mixed up]

Right? OK, so I think I am following so far, even though I think it  
could be worded more clearly (perhaps in a note?)

And the reason that 'background-attachment: fixed' changes that, and  
allows the background to stretch to the _viewport_ height (which may  
actually be shorter than the canvas height)? Well, I finally did find  
the answer to that too, in 'background-origin':

If the ‘background-attachment’ value for this image is ‘fixed’, [...]  
the background positioning area is the initial containing block.