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

background-position-x & y

From: Jethro Larson <jethrolarson@gmail.com>
Date: Sat, 01 Nov 2008 08:23:20 +0000
Message-ID: <a9b1b1f20810311111h730bd048m8133378af81e5137@mail.gmail.com>
To: www-style@w3.org
The `background-position-x` and `background-position-y` properties have been
in Internet Explorer for a long time now. However they haven't made it into
the [CSS spec](http://www.w3.org/TR/css3-background/), despite their
usefulness. While you can say that the regular `background-position`
property is suitable, without being able to specify the x and y positions
separately usage can get excessively verbose when using sprites.

Take the following example:

    #tabs li a{background: url(tabs_sprite.png);}
    li#slide_2 a{background-position: -122px 0;}
    li#slide_3 a{background-position: -244px 0;}
    li#slide_4 a{background-position: -366px 0;}
    li#slide_1.current a{background-position: 0 -41px;}
    li#slide_2.current a{background-position: -122px -41px;}
    li#slide_3.current a{background-position: -244px -41px;}
    li#slide_4.current a{background-position: -366px -41px;}
    li#slide_1 a:hover{background-position: 0 -82px;}
    li#slide_2 a:hover{background-position: -122px -82px;}
    li#slide_3 a:hover{background-position: -244px -82px;}
    li#slide_4 a:hover{background-position: -366px -82px;}

Could be simplified to:

    #tabs li a{background: url(tabs_sprite.png);}
    li#slide_2 a{background-position-x: -122px;}
    li#slide_3 a{background-position-x: -244px;}
    li#slide_4 a{background-position-x: -366px;}
    #tabs li.current a{background-position-y: -41px;}
    #tabs li a:hover{background-position-y: -82px;}

I feel that one of the big goals for CSS3 would be to ease the use of
sprites as they can improve performance of pages by a lot. Being able to
load up all the UI images into a single file would decrease download time
significantly and re-skinning a site would be as simple as changing a single
reference and modifying a single image file.

I was actually surprised to learn it's not in the CSS3 spec as it eases
spriting by quite a bit.

*Browser Implementation*
This should be trivial since the property pretty straight-forward and two
browsers already support it: IE5+ & Safari 1.2+ <

If I can help in any capacity let me know. I hope we can get this in there.

Thank you for your consideration,

Jethro Larson
Web Developer
Auctiva Corporation <http://auctiva.com>
Received on Wednesday, 12 November 2008 14:41:31 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:27:41 UTC