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

Re: Background Size (was: Re: Please explain why we need multiple background images)

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Mon, 15 Nov 2004 09:04:16 -0800
Message-ID: <002d01c4cb35$23fe2560$0c01a8c0@TERRA>
To: "Lachlan Hunt" <lachlan.hunt@iinet.net.au>
Cc: "www-style" <www-style@w3.org>

| See 'background-size' [1]. eg.

background-size is a completely different animal.
It describes how to stretch the whole background image.

In my case I am splitting image onto 9 areas:
four corners, top/bottom/left/right and middle
by using four image margin values.

To render destination background
corners are copied "as is" and other sections
are tiled or stretched.

For stretched sections example see
second element from bottom
at http://terrainformatica.com/w3/expandable.png
(source image for rendering this section
is http://terrainformatica.com/w3/stretchable.png)

For setting stretching or tiling mode for each section individually
I am using something like this

 background-position:15px 15px 15px 15px; /*left top right bottom margins */
 background-repeat:expand stretch-top stretch-bottom stretch-middle; /* 
h-smile specific */
 border: none;
 padding: 21px 15px;

To see this renderings alive please download
HTMLayout demo application (580kb) with the sample from
and open
by bin/browse.exe provided.

Andrew Fedoniouk.

Original Message from: "Lachlan Hunt"
| Andrew Fedoniouk wrote:
| >  background-repeat:expand; /* or -h-smile-expand, whatever you like */
| See 'background-size' [1]. eg.
|   background-size: 100% 100%;
| That, I think, would look identical to your expand value, is far more
| sensible, and it is being defined in the CSS3 backgrounds module.
| Though, if you're going to implement that, then it should also use a
| vendor prefix, at least until the module becomes a candidate
| recommendation and implementations are called for.  That is to avoid a
| situation where your implementation becomes non-conformant when the spec
| changes.
| The vendor prefix should not be optional on any proprietary extensions
| you implement, at least until such properties are defined a CSS
| recommendation, and, ideally, have been implemented correctly according
| to their definition.
| [1] http://www.w3.org/TR/css3-background/#background-size0
| -- 
| Lachlan Hunt
| http://lachy.id.au/
| http://GetFirefox.com/    Rediscover the Web
| http://SpreadFirefox.com/   Igniting the Web
Received on Monday, 15 November 2004 17:04:26 GMT

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