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

fantasai wrote:


> > If four percentage or length values are given, the vertical top position
> > comes first, the horizontal right position comes second, the vertical bottom
> > position comes third, and the horizontal right position comes fourth. The
> > only way I can see that this could work is having the non used position
> > values set to auto as below.
> > 
> > background-position:10px 10px /* top left */
> > or
> > background-position:10px auto auto 10px /* top left */
> > background-position:10px 10px auto auto /* top right */
> > background-position:auto 10px 10px auto /* bottom right */
> > background-position:auto auto 10px 10px /* bottom left */
> 
> That's one option. Another would be to specify which corner we're positioning
> relative to. E.g.
> 
> background-position: bottom right 10px 10px;
> 
> That has the advantage that we can position relative to the "start" edge,
> i.e. the left side in left-to-right text and the right side in right-to-left
> text.
> 
> background-position: top start 10px 10px;
> 
> ~fantasai

I am intrigue by your last suggestion. As I understand it this is mirroring the background image not just aligning it. Would this be correct?

Re: http://www.w3.org/TR/2005/WD-css3-background-20050216/

When I made my initial proposal I had in the back of my mind the situation when all four background positions top, right, bottom and left could have use values other than auto. The result would be to stretch or shrink a background image along it's horizontal and/or vertical axis depending on the intrinsic dimensions of the image. In the current draft this is what background-size does but in the reverse way. My alternative acting somewhat like a block element and background-size acting like a inline element.

So I will state my thoughts as an alternative and give comparisons of how it relates to the current draft specs for background-position and background-size with the use examples from the draft. 

1) Here are some examples. The first example stretches the background image independently in both directions to completely cover the content area:

div {
    background-image: url(plasma.png);
    background-size: 100%;
    background-origin: content}

could be

div {
    background-image: url(plasma.png);
    background-position: 0 0 0 0;
    background-origin: content}

2) The second example stretches the image so that exactly two copies fit horizontally. The aspect ratio is preserved:

p {
    background-image: url(tubes.png);
    background-size: 50% auto;
    background-origin: border}

could be

p {
    background-image: url(tubes.png);
    background-position: auto 50% auto 0;
    background-origin: border}

3) This example forces the background image to be 15 by 15 pixels:

para {
    background-size: 15px;
    background-image: url(tile.png)}

No example with background-position, only possible with a fixed size element.

4) This example uses the image's intrinsic size. Note that this is the only possible behavior in CSS level 1 and 2.

body {
    background-size: auto;
    background-image: url(flower.png)}

could be

body {
    background-position: auto auto auto auto;
    background-image: url(flower.png)}


5) The following example rounds the height of the image to 25%, down from the specified value of 30%. At 30%, three images would fit entirely and a fourth only partially. After rounding, four images fit. The width of the image is 20% of the background area width and is not rounded.

p {
    background-image: url(chain.png);
    background-repeat: repeat-y;
    background-size: 20% 30% round; }

Note: The above example is the only place in all of the draft on backgound-size that suggest scaling when rounding. The description on backgound-size above the examples suggest that rounding doesn't alter the intrinsic dimensions of the image, but instead not allowing it to repeat if a value other than whole number of images is used.

could be (not sure on the rounding)

p {
    background-image: url(chain.png);
    background-repeat: repeat-y round;
    background-position: 0 40% 30% 40%; }

Some of my examples. 

a) If I want and background image to be rendered 10% from each edge of an element or the background-origin and have the horizontal and vertical axis of the image stretched or shrunken depending on the intrinsic width, height and ratio of the image, I propose that this can be used.

background-position:10% 10% 10% 10%;
background-repeat:no-repeat;

Currently from what is in the specs I could have used.

background-position:10% 10%;
background-size:80% 80% round;

or with allowing background-position bottom and right.

background-position: bottom right 10% 10%;
background-size:80% 80% round;

This works regardless of if the element is of fixed or fluid width or height. A simulated test case.

http://css-class.com/test/css/colorsbackgrounds/position-percentage.htm

b) If I want a background image to be rendered 100px from each edge of an element or the background-origin and have the horizontal and vertical axis of the image stretched or shrunken depending on the intrinsic width, height and ratio of the image,  I propose that this can be used.

background-position:100px 100px 100px 100px;
background-repeat:no-repeat;

This works regardless of if the element is of fixed or fluid width or height. A simulated test case, please use IE to check as this test requires the quirksmode IE box model.

http://css-class.com/test/css/colorsbackgrounds/position-length.htm

Currently the draft specs does not allow for this even if positioning from the right or bottom edge. It is only possible to center a background image which is positioned from an element's (top, right, bottom or right) edge in pixels if the element is of fixed width or height.

So what I conclude is that there are limitation in both schemes. Some examples are possible in both schemes and some example can only been done with only one scheme. The implication are.

A over constrained example.

background-position:10% 10% 10% 10%;
background-size:80% 80% round;
background-repeat:no-repeat;

one that could work

background-position:auto 10% auto 10%;
background-size:auto 80% round;
background-repeat:no-repeat;

which is effectively the same as example a) above.

I will be happy if my initial proposal (positioning from four corners) is excepted, but I though I would offer another alternative.


Kind Regards, Alan

Received on Wednesday, 21 November 2007 07:50:50 UTC