Christoph ZillgensBack to Home

I‘m an Interface Designer and Web Developer from Germany. Here are some example of my work at my one-man company

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

  1. Jesse wrote 1306 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.

  2. Jesse wrote 1305 days ago · #

    See, I knew I was missing something like that. Thanks.

  3. Gardener wrote 1244 days ago · #

    Nice, very interesting post.

  4. mr.Douson wrote 1222 days ago · #

    Excellent post. I like the function “View all Posts”

Commenting is closed for this article.