Re: The canvas

--- Bert Bos <> wrote:
>    1. the background (and margins, border, etc.) of
> the HTML and BODY
>       elements are no different from any other
> element: backgrounds
>       are positioned from the upper left padding
> edge, margins are
>       transparent, etc.

>    2. there is no selector for the canvas (since it
> is not an
>       element), so where do we get its color from?
> we could have
>       introduced a pseudo-element or an @-rule, but
> we chose to follow 
>       HTML practice, and let the canvas "steal" the
> background from
>       the BODY element.

A. # The background of the box generated by the _root_
element covers the
# entire canvas

This is not inconsistent with what has been said at 1.
and 2., but it is not made nearly clear enough that
this is so. The most obvious interpretation of this
sentence is that, unlike other elements, the
background of the root element covers its margins.

In addition, 2. is not at all consistent with A, which
is where most of the difficulties that I had with it
arose - 2 says:

> we chose to follow 
>       HTML practice, and let the canvas "steal" the
> background from
>       the BODY element.

So why write root element if what is meant is BODY or

What should have been written is this:

If the root element's background is different from
transparent, then it colours the canvas. If it is not,
then BODY's (if relevant in that markup language)
background colours the canvas.

To give some examples:
background: red;
margin: 0;
In this example, the canvas will be red, but it will
be entirely covered by the HTML element's content
area, so what will be seen is HTML's background.

2. BODY {
background: green;
margin: 5%;

In this example, the canvas will be green, since
background has not been specified on HTML, and so the
canvas is coloured by BODY. BODY is also green, so
although it looks to the viewer of the page like there
is just one green element, what they are actually
seeing is BODY, which is green, plus the canvas, which
is also green.

3. HTML {background: black;}
BODY {background: red;
margin: 5%;}
In this example, the canvas is black, but it is
entirely obscured by the HTML element. The BODY
element is red, and because margins are transparent,
it will have a black margin around it.

From Matthew Brealey ( (for law)or (for CSS))
Do You Yahoo!?
Bid and sell for free at

Received on Friday, 19 November 1999 10:09:34 UTC