En mi código background-position-y, no funciona. En Chrome está bien, pero no funciona en Firefox.

Alguien tiene alguna solución?

Si su posición-x es 0, no hay otra solución que escribir:

background-position: 0 100px;

background-position-x es una implementación no estándar que proviene de IE. Chrome lo copió, pero lamentablemente no Firefox ...

Sin embargo, esta solución puede no ser perfecta si tiene sprites separados sobre un fondo grande, con filas y columnas que significan cosas diferentes ... (por ejemplo, diferentes logotipos en cada fila, seleccionados / suspendidos a la derecha, lisos a la izquierda) En ese caso, Sugeriría separar la imagen grande en imágenes separadas, o escribir las diferentes combinaciones en el CSS ... Dependiendo del número de sprites, uno u otro podría ser la mejor opción.

Utilizar esta

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

En lugar de esto

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

Firefox 49 se lanzará, con soporte para, background-position-[xy]en septiembre de 2016. Para versiones anteriores hasta 31, puede usar variables CSS para lograr posicionar el fondo en un solo eje similar a usar background-position-xo background-position-y. Las variables CSS alcanzaron el estado de Candidata a Recomendación en diciembre de 2015 .

El siguiente es un ejemplo completamente en varios navegadores de cómo modificar los ejes de posición de fondo para imágenes de sprites al pasar el mouse:

: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;es que no trabaja en el navegador web Firefox.

Debes seguir este tipo de sintaxis:

background-position: 10px 15px;

10px está limitado a "position-x" y 15px limitado a "position-y"

Solución de trabajo 100%

Siga esta URL para ver más ejemplos.

¿Por qué no usa background-position directamente?

Utilizar:

background-position : 40% 56%;

En vez de:

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

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

No funcionará si desea un fondo junto con la imagen. Entonces usa:

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

Esto funcionó para mí:

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

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

Asegúrese de indicar explícitamente la medida de su compensación. Me encontré con este problema exacto hoy, y se debió a cómo los navegadores interpretan los valores que proporciona en su CSS.

Por ejemplo, esto funciona perfectamente en Chrome:

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

Pero, para Firefox e IE, debe escribir:

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

Espero que esto ayude.

Sin embargo, esta solución puede no ser perfecta si tiene sprites separados sobre un fondo grande, con filas y columnas que significan cosas diferentes ... (por ejemplo, diferentes logotipos en cada fila, seleccionados / suspendidos a la derecha, lisos a la izquierda) En ese caso, Sugeriría separar la imagen grande en imágenes separadas, o escribir las diferentes combinaciones en el CSS ... Dependiendo del número de sprites, uno u otro podría ser la mejor opción.

El mío tiene el problema exacto según lo declarado por Orabîg, que tiene una tabla como un sprite que tiene columnas y filas.

A continuación se muestra lo que utilicé como solución al usar 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');   
    }
  });      
}