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

By: Glen Lipka

Glen Lipka — Wed, 24 Feb 2010 17:39:50 +0000

This post is funny to me. It’s from April 2007. 41 posts is ridiculous.

However, this is still not resolved. There is no reason why NOT to have independent background-position available in CSS.

With that said…I don’t care anymore. This blog is really about User Experience design. Read the front page.

By: Paul Tierney

Paul Tierney — Tue, 23 Feb 2010 19:08:18 +0000

I cant believe this post is still running…

In my view there are more than enough ways to control the backgound position on all browsers to satisify any given scenario or requirements.

I do agree that in IE you write less CSS to satisfy the requirement but code efficiency is not about the number of lines you write.

Using CSS in conjunction with multiple class assignments would be what I would recommend as a solution to this problem.

UNsubscribing now

By: J. Millington

J. Millington — Tue, 23 Feb 2010 18:45:00 +0000

Glen, you’re ~~an idiot~~ awesome.
[Edited by Glen 2/24/2009]

By: Brandon

Brandon — Mon, 01 Feb 2010 20:20:09 +0000

Want to break the background-position into x and y? Use the JavaScript split() function to break the string into an array so you can then use it dynamically. One line and you have the respective x and y coordinates for the background-position.

var bgpos = someObj.style.backgroundPosition.split(‘ ‘);
bgpos[0]; // x
bgpos[1]; // y

By: Ahmad Alfy

Ahmad Alfy — Wed, 27 Jan 2010 23:50:20 +0000

I had my navigation like this :
#nav li a {
background : url(image.png) no-repeat;
}
and every a has an ID to specify the position and the width. I wanted to do
#nav li a:hover{
background-position-y : -35px;
}
and all will be fixed… Shame it fails on FF

By: Alex

Alex — Sat, 23 Jan 2010 20:48:44 +0000

Here is my solution for u’re problem:
You need to append this lines to the css:

background-attachment: fixed;
height:100%;

Cheer’s,
Alex Manolescu

By: Ryan

Ryan — Fri, 04 Dec 2009 16:38:41 +0000

Webkit supports `background-position-x` and `background-position-y`. Firefox is the black sheep here.

Those who think it’s not an issue clearly have never optimized a website using sprites, and are unlikely to be gainfully employed in the web development industry (you know it’s true!)

By: Glen Lipka

Glen Lipka — Mon, 16 Nov 2009 04:19:29 +0000

Agreed mStudio. I have no idea why the W3C never dealt with this and why Mozilla/WebKit dont either. It’s such a simple thing.

By: mStudios

mStudios — Mon, 16 Nov 2009 03:41:03 +0000

What people don’t understand who state the setting the -x plus the -y at the same time is no big deal: I have a whole array of -y = top but on the -x axis they are all at different positions.

THAT is what makes the code so much longer, as now I have to write -x=50/-y=top and -x=25/-y=top and -x30/-y=top etc. etc. etc… that is A LOT more than just -y=top.

By: Flavio Copes

Flavio Copes — Sun, 15 Nov 2009 23:20:08 +0000

Thanks, I solved a bug using the comments above:

background-position-x: -300px;
=
background-position: 0 -300px;

background-position-x: -300px;
background-position-y: 20px;
=
background-position: 20px -300px;

background-position-x: -300px;
=
background-position-y: 50%;
background-position: 50% -300px;