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

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

From: Bert Bos <bert@w3.org>
Date: Wed, 21 Nov 2007 17:11:11 +0100
To: www-style@w3.org
Message-Id: <200711211711.11831.bert@w3.org>

On Wednesday 21 November 2007 08:50, Alan Gresley wrote:
> 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?

No, it's just for positioning. Image manipulation has been discussed in 
the past, but the conclusion so far has always been that that should 
not be in CSS (apart from scaling). The argument is that it would 
complicate CSS too much for the average user and that it is easier to 
understand (and more efficient for the Web) to rotate or mirror an 
image *before* putting it on the Web. Scaling is the exception, because 
you often need to scale to em units or percentages, and that can only 
be done in the browser.

But even the positioning relative to other edges than top and left is no 
longer needed since we decided to add calc() to CSS. That wasn't an 
easy decision, because calc() is not easy to work with (and a real 
challenge for a WYSIWYG editor), but its power is such that it removed 
the need for several other things, such as extensions to 
the 'background-position' property.

>
> 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.

I inserted some comments below, but on the whole I think it is an 
interesting idea. It avoids the need for one new property at the cost 
of a more complex syntax for another. The more complex syntax isn't 
very difficult to explain ("you either specify the position of the top 
left corner or both the top left and the bottom right"). But the 
question is what is easier and more common in practice, specifying two 
corners or one corner plus a size?

One argument for a separate size property is that the position is not 
relevant at all for most cases of repeated background and especially of 
repeated backgrounds when the size is rounded down to fit.

Another argument is that the question "how do I set the size of the 
background image?" is so common that providing the 
obvious 'background-size' property can save people a lot of time.

One argument for your model is that the case of an image at a certain 
distance from all sides requires no use of calc().

Another is that it corresponds roughly to how margins and absolute 
positioning work.

>
> 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.

How about 'background-position: 0 0 calc(100%-15px) calc(100%-15px)'? 
Not very intuitive, but it does make a background image of 15 x 15 px 
using your model :-)

>
> 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)}

This is equivalent to the default, so you would probably not specify 
anything at all. Or, if you do want an explicit rule, the actual 
default rule would do: 'background-position: 0% 0%' (with implied 'auto 
auto').

>
>
> 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; }

The 'round' keyword has become an alternative to 'repeat' in the latest 
editor's draft, so the example now reads:

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

>
> 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%; }

If a background is repeated while rounding, the position is not used. 
Rounding implies that the image is aligned to the edges. In your 
notation, the above example could be written as:

    p {
        background-image: url(chain.png);
        background-repeat: no-repeat round;
        background-position: 0 0 auto 70% }

>
> 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;

Actually, I think that would be

    background-position: 50% 50%;
    background-size: 80% 80%;
    background-repeat: no-repeat;

>
> 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.h
>tm
>
> 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.

Calc() can solve this case:

    background-position: 100px 100px;
    background-size: calc(100%-200px) calc(100%-200px);
    background-repeat: no-repeat

>
> 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



Bert
-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos                               W3C/ERCIM
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France
Received on Wednesday, 21 November 2007 16:11:34 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:56 GMT