RE: [css3-background] background-position relative to other corners

fantasai wrote:

> 
> So then what does
>    background-position: 100px 100px 100px 100px;
>    background-size: 2em 50px;
> mean?
> 
> I don't think the interaction between the two properties makes a lot of
> sense, and particularly since you can get the effects you want with
> calc() I'm not convinced it's a good idea to adopt this syntax for
> background-position.
> 
> ~fantasai


For a box of 400px width and height. The property 'background-size' would tile the background image (beginning top left corner for l-r text) by 6 times (after rounding slightly up) along the x-axis and precisely 4 times along the y-axis.

background-position: 100px 100px 100px 100px; /* four coordinates */
background-size: 2em 50px;

++++++++
++xxxx++
++xxxx++
++++++++


The area of the tiled background matches the size of the rectangle established by the 'background-position' coordinates. I have have prepared two test cases, one for a fixed dimension elements and another for a fluid dimension elements. Please check in Safari 3. Works in Opera 9.5 but is very buggy.

http://css-class.com/test/css/backgrounds/background-position-and-size1.htm

http://css-class.com/test/css/backgrounds/background-position-and-size2.htm

The syntax in black is what is currently possible b y the currect spec. The syntax in blue is based on my proposal. The syntax in red are the solutions with calc().

I did show in my previous list message this syntax:

background-position-coord: 0 0 0 0;

Maybe better syntax:

background-position: coord(0); /* top, right, bottom & left together */
background-position: coord(0 0); /* top - bottom (y-axis) & left - right (x-axis) */
background-position: coord(0 0 0); /* top, right - left (y-axis) & bottom */
background-position: coord(0 0 0 0); /* top, right, bottom & left */


Under the current spec 'background-position' infers that the value for 'background-size' is 'auto' and the value for 'background-repeat' is 'repeat'. My proposal reverses this where the value for 'background-position' infers that the value for 'background-size' is '100%' and the value for 'background-repeat' is 'no-repeat'. So is it right that if the value for 'background-size' is set to 'auto' then the background image size is now based on it's intrinsic dimension and ratio.

background-position: coord(50px 50px 50px 50px);
background-size:auto;

This will result in a tiled background of images covering the area which matches the size of the rectangle established by the 'background-position' coordinates. Each tile uses the value of their intrinsic dimension and ratio (see example 7a of each test case). I see this:

background-position: coord(50px 50px 50px 50px);
background-size:auto;
background-repeat:repeat


Which would repeat the tiled background area which matches the size of the rectangle established by the 'background-position' coordinates. I don't really see any use case here.


Alan

http://css-class.com/

Received on Tuesday, 29 January 2008 14:52:05 UTC