background-position-y doesn't work in Firefox (via CSS)?

Solution 1:

If your position-x is 0, there's no other solution than writing :

background-position: 0 100px;

background-position-x is a non-standard implementation coming from IE. Chrome did copy it, but sadly not firefox...

However this solution may not be perfect if you have separate sprites on a big background, with rows and cols meaning different things... (for example different logos on each row, selected/hovered on right, plain on left) In that case, I'd suggest to separate the big picture in separate images, or write the different combinations in the CSS... Depending on the number of sprites, one or the other could be the best choice.

Solution 2:

Use this

background: url("path-to-url.png") 89px 78px no-repeat;

Instead of this

background-image: url("path");
background-position-x: 89px;
background-position-y: 78px;
background-repeat: no-repeat;

Solution 3:

Firefox 49 will be released—with support for background-position-[xy]—in September 2016. For older versions up to 31, you can use CSS variables to achieve positioning the background on a single axis similar to using background-position-x or background-position-y. CSS variables reached Candidate Recommendation status in December 2015.

The following is a fully cross-browser example of modifying background position axes for sprite images on hover:

:root {
    --bgX: 0px;
    --bgY: 0px;
}

a {
    background-position: 0px 0px;
    background-position: var(--bgX) var(--bgY);
}

a:hover, a:focus { background-position-x: -54px; --bgX: -54px; }
a:active   { background-position-x: -108px; --bgX: -108px; }
a.facebook { background-position-y: -20px; --bgY: -20px;  }
a.gplus    { background-position-y: -40px; --bgY: -40px;  }

Solution 4:

background-position-y :10px; is not working in Firefox web browser.

You should follow this type of syntax:

background-position: 10px 15px;

10px is bounded to "position-x" and 15px bounded to "position-y"

100% working Solution

Follow this URL for more examples

Solution 5:

Why don't you use background-position directly?

Use:

background-position : 40% 56%;

Instead Of:

background-position-x : 40%;
background-position-y : 56%