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

Re: Background Size

From: David Hyatt <hyatt@apple.com>
Date: Mon, 15 Nov 2004 13:10:39 -0800
Message-ID: <41991B4F.2080005@apple.com>
To: Andrew Fedoniouk <news@terrainformatica.com>
CC: Lachlan Hunt <lachlan.hunt@iinet.net.au>, www-style <www-style@w3.org>

IMO a more intuitive way to do the "9-area" button is with just one 
image.  The border width values could then be used to set the widths of 
the sides and corners, and ideally the UA would just do the rest.


Andrew Fedoniouk wrote:

>| 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-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
>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 21:11:14 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:27:16 UTC