web-dev-qa-db-fra.com

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

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

Quelqu'un a une solution?

htmlcssfirefox
84
Marlos Carmo

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 issue 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 signifiant différentes choses ... (par exemple, des logos différents sur chaque ligne, sélectionnés/survolés à droite, en clair à gauche). 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'une ou l'autre pourrait être le meilleur choix.

119
Orabîg

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;
19
farshad saeidi

Firefox 49 sera publié - avec le support de background-position-[xy]— en septembre 2016. Pour les versions plus anciennes jusqu'à 31 ans, vous pouvez utiliser variables CSS pour positionner l'arrière-plan sur un seul axe, comme avec background-position-x ou background-position-y. Les variables CSS ont atteint le statut de recommandation du candidat en décembre 2015 .

Vous trouverez ci-dessous un exemple de modification des axes de position d'arrière-plan pour les images Sprite en survol, générée par plusieurs navigateurs:

: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;  }
16
Andy E

background-position-y :10px; ne fonctionne pas dans le navigateur Web Firefox.

Vous devez suivre ce type de syntaxe: 

background-position: 10px 15px;

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

Solution à 100% de travail

Suivez ceci URL pour plus d'exemples

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

Ne fonctionnera pas si vous voulez un fond avec l'image. Alors utilisez:

background: orange url("path-to-image.png") 89px 78px no-repeat;
3
Piotr Śródka

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

tilisez:

background-position : 40% 56%;

Au lieu de:

background-position-x : 40%;
background-position-y : 56%
3
Sandeep Gantait

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;
}
1
Stefan

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 différentes choses ... (par exemple, des logos différents sur chaque ligne, sélectionnés/survolés à droite, en clair à gauche). 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'une ou l'autre pourrait être le meilleur choix.

Le mien a le problème exact comme indiqué par Orabîg qui a un tableau comme Sprite qui a des colonnes et des lignes.

Ci-dessous est 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');   
    }
  });      
}
0
ace.spades

Assurez-vous d'indiquer explicitement la mesure de votre décalage. Je suis tombé sur ce problème aujourd'hui, en raison de la façon dont les navigateurs interprètent les valeurs que vous indiquez dans votre code 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.

0
Mike Zavarello