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

Re: [css3-background] New use case for background-position-x (&y!)

From: Alan Gresley <alan@css-class.com>
Date: Thu, 11 Nov 2010 15:44:46 +1100
Message-ID: <4CDB74BE.1060809@css-class.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
CC: Brad Kemper <brad.kemper@gmail.com>, Markus Ernst <derernst@gmx.ch>, "www-style@w3.org" <www-style@w3.org>, "lee.kowalkowski@googlemail.com" <lee.kowalkowski@googlemail.com>
Tab Atkins Jr. wrote:
> On Wed, Nov 10, 2010 at 3:23 PM, Brad Kemper <brad.kemper@gmail.com> wrote:
>> On Nov 10, 2010, at 8:35 AM, "Markus Ernst" <derernst@gmx.ch> wrote:
>>> Besides the discussion on image spriting being an appropriate use case or
>>> not, I think that Lee's actual request is actually not silly. I share his
>>> point that it would be consistent to have the possibility to set background
>>> position values separately, but I would consider background-position-top,
>>> -right, -bottom, and -left properties more appropriate than -x and -y
>>> properties, just as for element position, border and whatever.
>> I don't know how that would work if there were 4 component lengths in a
>> single declaration. Seems a little more complicated.
> Presumably it would be similar to how top/right/bottom/left work right
> now - if both -left and -right are specified, the position is
> overspecified, and -right is ignored.
> ~TJ

That does not sound correct. An over-specified case sounds much like 
something over-constrained. Also it shows the initial error in mapping 
background-image to x and y axises. Why do left or top always win?  I 
can write.

margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

None of these are ignored so if I write.

background-position-top: 10px;
background-position-right: 10px;
background-position-bottom: 10px;
background-position-left: 10px;

I would expect the same as it I simply wrote.

background-position: 10px 10px 10px 10px;

This would work logically with padding, border-width and margin.

padding: 10px 10px 10px 10px;
border-width: 10px 10px 10px 10px;
margin: 10px 10px 10px 10px;

There is no ambiguity in what edge I am referring too.

Giving background-position to all four edges would give the image an 
implicit width. So it would behave in the same manner as absolute 
positioning. I covered some of this here [1] and here [2].

The examples which I linked to are now reloaded [3] and [4]. The 
former is for fixed width boxes and the later is for fluid width 
boxes. The current background-position options are in black. My 
proposed background-position options from 2007-2008 are in blue.

I do not know the status of calc() but this was use as an argument 
against my proposal.

1. <http://lists.w3.org/Archives/Public/www-style/2007Nov/0255.html>
2. <http://lists.w3.org/Archives/Public/www-style/2008Jan/0425.html>

Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
Received on Thursday, 11 November 2010 04:45:21 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:40 UTC