W3C home > Mailing lists > Public > www-style@w3.org > November 1999

Re: The canvas

From: David Perrell <davidp@earthlink.net>
Date: Thu, 18 Nov 1999 21:42:36 -0800
To: www-style <www-style@w3.org>
Message-id: <01d301bf3250$e3039ae0$15a8a8c0@DPER>
Tantek Celik wrote:

> David Perrell wrote:
> > The logic of this statement eludes me. How is it that
> > background-images at top left are ugly and and partial
> > background-images at bottom right are not?
> Um, common asthetic sense?  I believe there have been
studies about how
> readers tend to look at a layout (whether textual or
graphical) starting at
> the top left and make their way towards the bottom right.

A repeated background is typically used as a texture, and the
less obvious its tile boundaries the better.

> Certainly people
> do that with user interfaces.  Oh wait, I have a reference:

Not necessary. There's a big difference between UI elements
and a background texture. BODY is an element, not BODY's

> Then in your HTML documents use
>  HTML { margin:0;padding;0;border:none }
>  BODY { margin:0;padding;0;border:none }
>  DIV.body { /* whatever you would have styled for the "body"
*/ }
> And then always use a synthetic BODY constructed from a DIV.

With margins, DIV.body's background would not bleed onto the

> Use two DIVs.  DIV.canvas and DIV.body.  Assuming you want
> margins on your "body":
> DIV.canvas {
>   margin:0;padding:0;border:none;
>   background: url(bg.png) 10px 15px
> }
> DIV.body {
>   margin:10px 15px 20px; background: transparent;
> }

Yes, that would work for pixel-sized margins. But if history
is any guide, display quality will not remain static, and a
pixel from your display might cover 4 on mine. I prefer to use
relative measurements for margins. Unless I can
correspondingly resize the background image then I don't see
how your suggestions can help.

> > A second scenario: As above, but I want to put a DIV in
> > that has a de-saturated, hue-altered version of the
> > image, so that the appearance is of a tinted translucent
> > over the background. The backgound-images in BODY and DIV
> > align perfectly. If the background-image does not align wi
> > BODY's padding, how could I get this effect?
> See above example for how to do embedded DIV alignments.

Again, no help. I want the background image to 'bleed' onto
the canvas, but I want it aligned relative to the element's
padding boundary.

> > A third scenario: As above, but I want the image pattern
> > centered in the content + padding area. Again, unless
> > alignment is relative to padding, how can I get this
> Again, just have 0 margin, border, padding on BODY and HTML.
Then do what
> you want with DIVs.

Again, no help if I want the tiled images to bleed onto the

> No limitations - just use the relatively quirk-free DIV tag
instead of the
> quirky-tradition-laden HTML and BODY.

Sorry, but I don't see that DIV will do what I want, given the
background treatment you suggest.

> Should we create an implementation that breaks thousands,
perhaps millions
> of pages out on the web right now just for the sake of blind
> interpretation when it does not provide any additional
capabilities?  I
> don't think so.

I'm trying to recall pages with backgrounds that would be
broken by an altered reference point. I can't think of any. My
impression is that most repeating backgrounds are not
dependent on any reference point. Any specification of
backgrounds with CSS would hopefully have been by authors
aware of the spec and understanding of the fact that browser
builders have had a somewhat difficult time implementing it

David Perrell
Received on Friday, 19 November 1999 00:47:57 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:01 GMT