Comments on: Background-position-y: Firefox Fails!

By: Daniel

Daniel — Thu, 19 Jan 2012 20:02:51 +0000

… reading all the replies, background-position: (x) (y); did the trick for me.

Thanks!

By: Daniel

Daniel — Thu, 19 Jan 2012 19:47:43 +0000

Did a search on the topic and ended up here. Having the same issue in FF9… just letting you know .

Cheers!

By: Geenkaas

Geenkaas — Wed, 07 Dec 2011 15:04:26 +0000

Addin to this epic post; FF _still_ does not support this obviously useful property. For now I am just leaving FF users in the cold with ugly looking backgrounds and non-moving bg sprintes. Servers them well, they are probably used to seeing websites being rendered ugly.

Amazing how many people do not get the problem by the way and insist in copying the other axis in the rule, not seeing how this would bloat the code or just plain override the correct value.

Firefox, get your act together fast!

P.S. Is Kalen’s solution (about 8 replies up) totaly bonkers or is it me? Makes no sense at all certainly does _not_ what I want.

By: Devric

Devric — Mon, 15 Aug 2011 00:50:50 +0000

Jeez, firefox! still not solved the -x -y issue, the thing most people answer is that you can write a combined y;
but imaging i have 20+ sprites in a image each has just a -30px on y axis,
- background-position-y will only need to be set once to -30px for all .class a:hover {}
but since freaking firefox dosent work
- i need to repeat that code for every single .classA a:hover, .classB a:hover, 20 times 2, 40 lines of code. compare to only 21 lines of code.
I dislike IE, but it works with this on both webkit and ie browsers just not freaking firefox….

By: Jt

Jt — Fri, 12 Aug 2011 20:25:59 +0000

No, IE fails :p

By: McShaman

McShaman — Mon, 27 Jun 2011 23:08:56 +0000

You could try a trick like this:

Sprite

div {
background-position: 10px 0;
}

a {
background-position: inherit 10px;
}

I dont know what support is like for the inherit option.

By: Andrew Volk

Andrew Volk — Tue, 31 May 2011 02:12:34 +0000

I think Erkko’s solution pretty much wraps up the initial issue, right?

“background-position-x: 300px;
background-position: 0 300px;”

Works for me, any way.

By: Diego

Diego — Tue, 24 May 2011 14:19:18 +0000

Do you know the CSS standards?
There is not background-position-x in the standard
http://www.w3.org/TR/2002/WD-css3-background-20020802/#properties4
So, is not a FF bug. Actually, is a IE bug to implement not standard css properties.

btw, I think it could be posible to do it in conjunction with the background-origin property.
http://www.w3.org/TR/2002/WD-css3-background-20020802/#background-origin

By: Gurhan

Gurhan — Mon, 23 May 2011 09:46:53 +0000

It’s incredible that FF still does not support independent background-position declarations..

By: James Morrish

James Morrish — Mon, 14 Feb 2011 10:41:32 +0000

This would definitely be a brilliant thing for Mozilla to implement. I have a sprite of 8 navigation buttons, each with a roll-over and a down effect – so 24 buttons in total. The buttons are arranged in a single PNG, in a grid of 8 x 3.

Instead of implementing a single line of CSS for the hover effect, eg:

#nav li a:hover { background-position-y: -80px; }

I have to write 8 lines of CSS:

#nav li.home a:hover { background-position: 0 -80px; }
#nav li.about a:hover { background-position: -100px -80px; }
#nav li.about a:contact { background-position: -200px -80px; }

… and so on

so in my case, the CSS will be many times longer because this hasn’t been implemented.