Re: Background Size

Hi, David,

To reuse "border width values" is a good idea but
only one: borders still could be used with such image background.
Couple of interesting effects could be achieved when they used in 
combination.

My idea to use background-repeat/background-position was pretty simple:

If you are using 'expand'  (-h-smile-expand) value in background-repeat then
background-position could be safely used for defining image margins. 
'expand' means that
image occupy the whole given area so you don't need horizontal/vertical 
positions.

Andrew Fedoniouk.
http://terrainformatica.com




Original Message from: "David Hyatt" <hyatt@apple.com>
| 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.
|
| dave
|
| 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.
| >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 Tuesday, 16 November 2004 00:43:54 UTC