background-position-y ne fonctionne pas dans Firefox (via CSS) ?

Question

Dans mon code, le background-position-y ne fonctionne pas. Dans Chrome, c'est correct, mais cela ne fonctionne pas dans Firefox.

Quelqu'un a une solution ?

Answer 1

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 colonnes qui ont des significations différentes... (par exemple, des logos différents sur chaque ligne, sélectionnés / survolés à droite, simples à gauche). Dans ce cas, je suggère de séparer la grande image en plusieurs images, ou d'écrire les différentes combinaisons dans le CSS... En fonction du nombre de sprites, l'un ou l'autre pourrait être le meilleur choix.

Answer 2

utiliser

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

Au lieu de cela,

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

Answer 3

ce réponse.
il y a un exemple fonctionnel dans jsfiddle aussi. C'est utile à la maison.

Answer 4

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 colonnes signifiant des choses différentes... (par exemple, des logos différents sur chaque ligne, sélectionnés/arborés à droite, simples à gauche) Dans ce cas, je suggérerais de séparer la grande image dans des images séparées, ou d'écrire les différentes combinaisons dans le CSS... En fonction du nombre de sprites, l'un ou l'autre pourrait être le meilleur choix.

Le mien a exactement le même problème que celui énoncé par Orabîg qui a un sprite de type tableau qui a des colonnes et des rangées.

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');   
    }
  });      
}

Answer 5

Veillez à indiquer explicitement la mesure de votre décalage. J'ai rencontré ce problème aujourd'hui, et il é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 vous aidera.