- From: Bert Bos <bert@w3.org>
- Date: Wed, 21 Nov 2007 17:11:11 +0100
- To: www-style@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 UTC