Firefox doesn’t “fail” background-position-x/y! That’s a MSIE specific CSS property.

“…Microsoft introduced two new, browser-specific background properties with the release of version 5.5 of Internet Explorer: background-position-x and background-position-y…”

http://safari.oreilly.com/0130092789/ch14lev1sec7

re: standards.

I agree with Glen. While standards are a fantastic idea, and to be supported, being too blinkered about them can be limited. While web standards and standard compliant browsers are usually the good guys its also important to recognise when companies like microsoft implement something of quality and commonsense. Hopefully the standards will follow.

Sample code and more detail:
http://commadot.com/?p=590

I was searching just to find this same issue.
I am using CSS Sprites, which is a great performance technique, and I’ve got really disappointed with Firefox because of this…

For those who not understood what is the real issue, try to imagine this situation…

I have one image with a lot of logos which I just use background-position to place to the right location of my div. But I do not want that all of my divs have the same appearance. For this kind of situation, I want that sometimes the logo can be placed at the left and sometimes at the right…

HTML CODE

HERE I WANT ONE LOGO TO THE LEFT
HERE TO THE RIGHT

CSS CODE

/* default background position to the left */
div{background:url(logos.gif) no-repeat;}

/* set background position to the right */
div.customdiv{background-position-x:right;}

/* positioning the logos */
div.logo1{background-position-y:-10px;}
div.logo2{background-position-y:-50px;}

If I use the standard and firefox logic, I cannot use the background-position-y nor the background-position-x. I’d have to make a redundant logic to all position both at the same time…
background-position:right -50px;
background-position:left -50px;

ALWAYS… Sorry, I hate to say this, but this time MSIE won.

Andy wrote: “erkko, thats only assuming you want the background’s y position to be at zero. What if it is at a variable y position? Without changing the X only, you would have to use redundant logic to find the Y again.”

“background-position: 0 300px;” was an EXAMPLE!
You can make what you need…
background-position: 150px 300px;
background-position: 300 0px;
background-position: 100% 100%;
background-position: 45% 93%;
They all work and they only are one line of CSS.

@Renato: you just need to specify both the x and y of your div.logo1 position (i.e., drop the “-y” and just add 0 for the “x” position.

background-position-x: left; should be

background-position: left 100%;

background-position-x: right; should be

background-position: right 100%;

its all very simple.

I’ve just checked my page that has in use a background-position-x and/or -y @ CSS level 2.1 at their validation site. After seeing a green safe bar it offered me icons that this page is CSS2.1 Valid and certified.

Now I really don’t understand – what are they checking there for? A well formed text or CSS declarations?
Or does this mean that background-position-x/y is CSS 2.1 standard?!!

Or does this mean that we should wait another decade for W3C, to come to their “own brilliant idea” that is should be very useful to be able to position background x/y positions separately. Therefore we propose a new CSS invention: background-placement-horizontal: 16px-to-the-right/left; and
background-placement-vertically: 25px-tho-the-top/bottom;
or some other goddamn novel-length statements, like their famous: document.getElementBy(‘theID”).style.backgroundPlacementVertically=
25pxToTheTop, with a warning: “be sure not to forget to explicitly state the “ToTheTop” instruction as indicated otherwise the browser will completely ignore your instruction since the browser will not know the direction which way to push the background image.

Well. So much for the standards and lazy browsers like Mozilla’s or should I say, Godzilla’s…

Guys this works!:

The syntax for setting the background x and y properties is:

background-position: [horizontal position] [vertical position];

Such as:

background-position: right top; //places the image right horizontally and top vertically
background-position: left bottom; //places the image left horizontally and bottom vertically
background-position: center center; //places the image center horizontally and center vertically

..it’s really simple.

I am currently dealing with this same problem – it has been frustrating to say the least. I find it slightly pathetic that there exists no standard CSS properties that allow you to define the background image on the x and y axis separately. However, I don’t see this as a failing of Firefox, because they are following web standards and there is no such properties as background-position-x and background-position-y in the official CSS specs. Perhaps there should be – but that is an argument that should be directed at the W3C and not at Firefox.

Anyways, here is my initial idea for a solution. Why not just write your own javascript functions to change the x and y positions? This could be done in two generic functions so as to hide the complexity of this operation. For example, a changeYPos(myElement, newPos) function could parse out the current x AND y positions for the background image of the element, and then set the Y of the background position by passing it the old x along with the new y. Then that function could be re-used and it would be relatively easy to create cross-browser compatible image matrix using this technique.

@Glen: Here is an example of a function I just wrote to do this. I have not tested it extensively across all browsers but it seems to work fine so far in FF3.

function changeBackgroundPosition(element, axis, value)
{
var oldPos;
var newPos;

oldPos = document.getElementById(element).style.backgroundPosition;

alert(“oldPos = ” + oldPos);

if (axis == “x”) {
newPos = oldPos.replace(/^\S+/, value);
} else if (axis == “y”) {
newPos = oldPos.replace(/\S+$/, value);
}

document.getElementById(element).style.backgroundPosition = newPos;
}

Actually, that didn’t work. Nevermind, haha.

This recreates the background-position-y, allowing for independent declaration:

currBG = $(whichTab + ” a”).css(‘background-position’);
currBG = currBG.substr(0,currBG.indexOf(” “)) + ” -31px”;
$(whichTab + ” a”).css({‘background-position’: currBG});

You could obviously swap that around to change on -x if you wanted.

split(” “)

space character.

Glen I’m in the same boat as you and find it hard to understand why the ability to define background-position-x/y isn’t standard. They give your border-left, border-top, padding-left, bottom etc. – being able to define x or y uniquely seems to be the natural progression.

Would love a follow up on this if it ever becomes standard.

well, I search and hit here, frustrating reading down.

Finally I took this solution and it works:

function set_backpos_y(ele, val){
var posX = $(ele).css(‘background-position’).split(‘ ‘)[0];
$(ele).css(‘background-position’, posX+” “+val+”px”);
}

CHANGE background TO bgcolor !!! Somehow I missed to test the last change I made

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.

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!)

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