No official background position x and y in CSS?
Currently I’m developing a website where I wanted to take advantage of the CSS property background-position-y to save some time and code while positioning a CSS sprite:
li:nth-of-type(1) a {
background-position:0 0;}
li:nth-of-type(2) a {
background-position:-35px 0;}
li:nth-of-type(3) a {
background-position:-70px 0;}
/* One hover declaration fo all li-elements */
li a:hover {
background-position-y: -30px;}
Update: Look at comment 13 in Jonathan’s post for a better example.
It works great in Safari/Chrome, IE, but I was surprised that it’s not working in Firefox and Opera.
Some research later I found out that this useful CSS property isn’t even part of any specification. Jonathan Snook wrote about that a year ago, complaining about the same thing. There where made some good points in the comments as well.
As far as I know there is no way of declaring a single background position without writing the other one. I can’t find any argument why it isn’t in the specs. Also, there’s no work around. Maybe you’ve a solution?
5 comments
Commenting is closed for this article.
Jesse wrote 819 days ago · #
I think I might be missing something…
Would that property even be that much faster, or easier to write? You have to add two characters “-” and “y” or “x”, just so you can remove a space and a “0”. That seems about the same to me.
Christoph Zillgens wrote 819 days ago · #
Yes, just look at comment 13 in Jonathans post were »Kit Grose« explains it.
Jesse wrote 819 days ago · #
See, I knew I was missing something like that. Thanks.
Gardener wrote 758 days ago · #
Nice, very interesting post.
mr.Douson wrote 736 days ago · #
Excellent post. I like the function “View all Posts”