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