- From: Andrew Fedoniouk <news@terrainformatica.com>
- Date: Mon, 15 Nov 2004 09:04:16 -0800
- 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 UTC