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.
http://www.terrainformatica.com/htmlayout/images/srcback.gif

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

#stretchable-image
{
 background-image:url(backgrounds/stretchable.png);
 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
http://terrainformatica.com/layout/main.whtm
and open
html_samples/generic/backgrounds.htm
by bin/browse.exe provided.

Andrew Fedoniouk.
http://terrainformatica.com




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