W3C home > Mailing lists > Public > www-style@w3.org > January 2008

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

From: Alan Gresley <alan1@azzurum.com>
Date: Tue, 22 Jan 2008 08:13:31 -0700
To: fantasai <fantasai.lists@inkedblade.net>
cc: www-style@w3.org
Message-ID: <20080122081331.34b83c2f3c9bef00757a2c62c0fb7450.ea2fb59c9d.wbe@email.secureserver.net>

fantasai wrote:
> 
> David Hyatt wrote:
> >
> > I might write that with functional notation.
> > 
> > background-position: left(10px) top(10px)
> > background-position: end(10px) after(10px)
> 
> Since
> 
>    background-position: left top;
>    background-position: 10px 10px;
>    background-position: left 10px;
> 
> are all already valid, I don't think the functional notation fits well here.
> When they're just keywords and values you can look at it as an expansion:
> 
>    background-position: left 10px top 15px;
>    background-position: left      top     ;
>    background-position:      10px     15px;
>    background-position: left          15px;
>    background-position:      10px top     ;
> 
> ~fantasai


How does this type of expansion have any analogy for the bottom right corner for instance?

>    background-position: right 10px bottom 15px;
>    background-position: right      bottom     ;
>    background-position:       10px        15px;
>    background-position: right             15px;
>    background-position:       10px bottom     ;


I can see the cases where authors may want use such background positions:

background-position: left 0px top 0px;

or this 

background-position: left bottom;


I actually like David's suggestion, it relates to absolute positioning (left:10px) and moves away from the constraints of just an x, y axis and leaves open the option for background positioning relative to four edges. I see background-position as a very powerful tool which can breaks away from the concept of just x and y axises.

http://en.wikipedia.org/wiki/Cartesian_Coordinate_System


With absolute positioning size takes on a different meaning. A box can be sized explicitly and implicitly. An explicit size by its' dimensions of width (x axis), and height (y axis) and an implicit size from the position of its' four edges (top, right, bottom and left) from its' containing block edge or background-origin. CSS already has this concept. We don't talk about an x axis margin when we talk of a margin box. It has a positioned from its' containing block by use of left and right margins.

width: auto; /* implicit */
margin: 0 200px;

or

width: 800px; /* explicit */
margin: 0 auto;


This is part of why I proposed background:position with four edges. It doesn't replace background-size, it's just an implicit way to size a background image along with positioning it. It also break aways from just seeing a background position relative to one corner which is much similar in behavior to relative positioning (maximum of two edges) which is nowhere as dynamic as absolute positioning (four edges). I can see: 


background-position: 100px 100px 100px 100px; /* implicit */

which would equal;

background-size: 100% 100%; /* explicit */


That leaves background position and size available to still be used together:

background-position: 100px 100px 100px 100px;
background-size: 50% 50%; /* relative to background-position */

-.-.-.-.-.-.-.-.-.-
-.x.x.x.x.o.o.o.o.-
-.x.x.x.x.o.o.o.o.-
-.x.x.x.x.o.o.o.o.-
-.x.x.x.x.o.o.o.o.-
-.o.o.o.o.x.x.x.x.-
-.o.o.o.o.x.x.x.x.-
-.o.o.o.o.x.x.x.x.-
-.o.o.o.o.x.x.x.x.-
-.-.-.-.-.-.-.-.-.-


background-position: 100px 100px;
background-size: 50% 50%; /* relative to element size */

-.-.-.-.-.-.-.-.-.-
-.x.x.x.x.x.o.o.o.o.o
-.x.x.x.x.x.o.o.o.o.o
-.x.x.x.x.x.o.o.o.o.o
-.x.x.x.x.x.o.o.o.o.o
-.x.x.x.x.x.o.o.o.o.o
-.o.o.o.o.o.x.x.x.x.x
-.o.o.o.o.o.x.x.x.x.x
-.o.o.o.o.o.x.x.x.x.x
 .o.o.o.o.o.x.x.x.x.x
 .o.o.o.o.o.x.x.x.x.x



Alan

http://css-class.com/
Received on Tuesday, 22 January 2008 15:13:50 GMT

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