No meu código, o background-position-ynão funciona. No Chrome está tudo bem, mas não funciona no Firefox.

Alguém tem alguma solução?

Se sua posição-x for 0, não há outra solução a não ser escrever:

background-position: 0 100px;

background-position-x é uma implementação não padrão proveniente do IE. O Chrome copiou, mas infelizmente não o Firefox ...

No entanto, esta solução pode não ser perfeita se você tiver sprites separados em um fundo grande, com linhas e colunas significando coisas diferentes ... (por exemplo, logotipos diferentes em cada linha, selecionados / pairados à direita, planos à esquerda) Nesse caso, Eu sugiro separar o quadro geral em imagens separadas, ou escrever as diferentes combinações no CSS ... Dependendo do número de sprites, um ou outro pode ser a melhor escolha.

Usa isto

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

Em vez disso

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

O Firefox 49 será lançado - com suporte para background-position-[xy]- em setembro de 2016. Para versões anteriores até 31, você pode usar variáveis ​​CSS para obter o posicionamento do fundo em um único eixo semelhante ao uso background-position-xou background-position-y. As variáveis ​​CSS alcançaram o status de recomendação candidata em dezembro de 2015 .

A seguir está um exemplo totalmente cruzado de navegadores de modificação de eixos de posição de fundo para imagens de sprite ao pairar:

: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;  }

background-position-y :10px;não está funcionando no navegador Firefox.

Você deve seguir este tipo de sintaxe:

background-position: 10px 15px;

10px é limitado a "posição-x" e 15px limitado a "posição-y"

Solução 100% funcional

Siga este URL para mais exemplos

Por que você não usa a posição de fundo diretamente?

Usar:

background-position : 40% 56%;

Ao invés de:

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

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

Não funcionará se você quiser um fundo junto com a imagem. Então use:

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

Isso funcionou para mim:

a {
    background-image: url(/image.jpg);
    width: 228px;
    height: 78px;
    display: inline-block;
}

a:hover {
    background-position: 0 -78px;
    background-repeat: no-repeat;
}

Certifique-se de declarar explicitamente a medição de seu deslocamento. Eu me deparei exatamente com esse problema hoje, e foi devido à forma como os navegadores interpretam os valores que você fornece em seu CSS.

Por exemplo, isso funciona perfeitamente no Chrome:

background: url("my-image.png") 100 100 no-repeat;

Mas, para Firefox e IE, você precisa escrever:

background: url("my-image.png") 100px 100px no-repeat;

Espero que isto ajude.

No entanto, esta solução pode não ser perfeita se você tiver sprites separados em um fundo grande, com linhas e colunas significando coisas diferentes ... (por exemplo, logotipos diferentes em cada linha, selecionados / pairados à direita, planos à esquerda) Nesse caso, Eu sugiro separar o quadro geral em imagens separadas, ou escrever as diferentes combinações no CSS ... Dependendo do número de sprites, um ou outro pode ser a melhor escolha.

O meu tem exatamente o problema declarado por Orabîg que tem uma tabela como sprite que tem colunas e linhas.

Abaixo está o que eu usei como uma solução alternativa usando js

firefoxFixBackgroundposition:function(){
  $('.circle').on({
    mouseenter: function(){
       $(this).css('background-position',$(this).css('background-position').split(' ')[0]+' -10px');   
    },
    mouseleave: function(){
       $(this).css('background-position',$(this).css('background-position').split(' ')[0]+' 0');   
    }
  });      
}