Re: [CSS Backgrounds] root element

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.

> 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.

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, although any images are sized and positioned
   # relative to the root element as if they were painted for that
   # element alone.

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.

~fantasai

Received on Thursday, 12 November 2009 01:41:49 UTC