Dans mon code, background-position-ycela ne fonctionne pas. Dans Chrome, c'est ok, mais ne fonctionne pas dans Firefox.

Quelqu'un a-t-il une solution?

Si votre position-x est 0, il n'y a pas d'autre solution que d'écrire:

background-position: 0 100px;

background-position-x est une implémentation non standard provenant d'IE. Chrome l'a copié, mais malheureusement pas Firefox ...

Cependant, cette solution peut ne pas être parfaite si vous avez des sprites séparés sur un grand fond, avec des lignes et des cols signifiant des choses différentes ... (par exemple des logos différents sur chaque ligne, sélectionnés / survolés à droite, unis à gauche) Dans ce cas, Je suggérerais de séparer la grande image en images séparées, ou d'écrire les différentes combinaisons dans le CSS ... Selon le nombre de sprites, l'un ou l'autre pourrait être le meilleur choix.

Utilisez ceci

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

Au lieu de cela

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

Firefox 49 sortira - avec prise en charge pour background-position-[xy]- en septembre 2016. Pour les anciennes versions jusqu'à 31, vous pouvez utiliser des variables CSS pour obtenir le positionnement de l'arrière-plan sur un seul axe similaire à l'utilisation de background-position-xou background-position-y. Les variables CSS ont atteint le statut de recommandation candidate en décembre 2015 .

Ce qui suit est un exemple entièrement multi-navigateurs de modification des axes de position d'arrière-plan pour les images de sprite au survol:

: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;est ne fonctionne pas dans le navigateur Web Firefox.

Vous devez suivre ce type de syntaxe:

background-position: 10px 15px;

10px est limité à "position-x" et 15px est limité à "position-y"

Solution 100% fonctionnelle

Suivez cette URL pour plus d'exemples

Pourquoi n'utilisez-vous pas directement background-position ?

Utilisation:

background-position : 40% 56%;

Au lieu de:

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

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

Ne fonctionnera pas si vous voulez un arrière-plan avec l'image. Alors utilisez:

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

Cela a fonctionné pour moi:

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

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

Assurez-vous d'indiquer explicitement la mesure de votre décalage. Je suis tombé sur ce problème exact aujourd'hui, et cela était dû à la façon dont les navigateurs interprètent les valeurs que vous fournissez dans votre CSS.

Par exemple, cela fonctionne parfaitement dans Chrome:

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

Mais, pour Firefox et IE, vous devez écrire:

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

J'espère que cela t'aides.

Cependant, cette solution peut ne pas être parfaite si vous avez des sprites séparés sur un grand fond, avec des lignes et des cols signifiant des choses différentes ... (par exemple des logos différents sur chaque ligne, sélectionnés / survolés à droite, unis à gauche) Dans ce cas, Je suggérerais de séparer la grande image en images séparées, ou d'écrire les différentes combinaisons dans le CSS ... Selon le nombre de sprites, l'un ou l'autre pourrait être le meilleur choix.

Le mien a le problème exact comme indiqué par Orabîg qui a une table comme sprite qui a des colonnes et des lignes.

Voici ce que j'ai utilisé comme solution de contournement en utilisant 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');   
    }
  });      
}