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

Dans mon code la background-position-y ne fonctionne pas. Dans google Chrome, c'est ok, mais ne fonctionne pas sous Firefox.

Quelqu'un a une solution?

Bonne nouvelle tout le monde! Ressemble background-position-x et -y seront pris en charge dans Firefox 49: developer.mozilla.org/en-US/docs/Web/CSS/...

InformationsquelleAutor Marlos Carmo | 2013-02-13

119

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 un non-standard de la mise en œuvre à venir de l'ei. Chrome n'a copier, mais malheureusement ce n'est pas firefox...

Cependant, cette solution ne peut pas être parfait si vous avez séparé les sprites sur un grand fond, avec les lignes et colonnes sens des choses différentes... (par exemple, les différents logos sur chaque ligne, sélectionné/a plané sur la droite, de la plaine à gauche)
Dans ce cas, je vous suggère de séparer la grande image en images distinctes, ou écrire les différentes combinaisons dans le CSS... Selon le nombre de sprites, l'un ou l'autre pourrait être le meilleur choix.
- Huuumm! Merci! J'ai essayer et travaillé!
- Merci, à la grande pêche. Je suis juste allé et a enlevé mes utilisations de -x et-y donc que je suis conformes aux normes. 🙂
- Comme toujours avec les FF... bizarre
InformationsquelleAutor Orabîg
19

Utiliser cette
```
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;
```
- drôle que firefox ne prend pas en charge "au Lieu de" balisage, mais oui, cela fonctionne.. ty 😉
- il a travaillé! Merci!
InformationsquelleAutor farshad saeidi
16

Firefox 49 va être publié—avec le soutien de background-position-[xy]—en septembre 2016. Pour les versions plus anciennes jusqu'à 31, vous pouvez utiliser CSS variables pour atteindre le positionnement de l'arrière-plan sur un seul axe similaire à l'aide de background-position-x ou background-position-y. CSS variables atteint Candidat Recommandation statut en décembre 2015.

La suite est entièrement de la croix-navigateur exemple de modification de fond de la position des axes de sprite images sur le vol stationnaire:
```
: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;  }
```
- Cela fait presque un an dans les limbes, avec Firefox, par exemple, être la seule mise en œuvre. Pas un bon signe.
- C'est sous considération par Microsoft, avec un juste quelques voix derrière elle, et le développement vient de (re)commencé pour Chrome. Toutefois, pour ce cas d'utilisation particulier, CSS variables peuvent être utilisées aujourd'hui, comme le seul navigateur qui les met en œuvre, est la seule qui a besoin d'eux pour simuler background-position-x/y.
- Cool! Mieux vaut tard que jamais, je suppose 🙂
- Viens de remarquer - CSS Variables est sur son chemin pour CR. Aussi cool.
- bonjour 2016! toujours pas de mise en oeuvre... :\
InformationsquelleAutor Andy E
15

background-position-y :10px; est pas de travail dans le navigateur web Firefox.

Vous devez suivre ce type de syntaxe:
```
background-position: 10px 15px;
```
10px est bornée à "position-x" et 15px bornée à "position-y"

100% Solution de travail

Suivre cette URL pour plus d'exemples
- Cela fonctionne dans ff v. 38. Doit être marquée comme étant la bonne solution. Il réalise exactement ce que la question est après
InformationsquelleAutor Eashan
3

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

Utilisation:
```
background-position : 40% 56%;
```
Au Lieu De:
```
background-position-x : 40%;
background-position-y : 56%
```
InformationsquelleAutor Sandeep Gantait
3
```
background: url("path") 89px 78px no-repeat;
```
Ne fonctionnera pas si vous voulez un arrière-plan avec l'image. Donc, utiliser:
```
background: orange url("path-to-image.png") 89px 78px no-repeat;
```
InformationsquelleAutor Piotr Śródka

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

InformationsquelleAutor Stefan

0

Assurez-vous d'indiquer explicitement la mesure de l'offset. Je suis tombé sur ce problème précis aujourd'hui, et c'était dû à la manière dont les navigateurs interprètent les valeurs que vous fournissez dans votre CSS.

Par exemple, cela fonctionne parfaitement dans google Chrome:
```
background: url("my-image.png") 100 100 no-repeat;
```
Mais, pour IE et Firefox, vous devez écrire:
```
background: url("my-image.png") 100px 100px no-repeat;
```
Espère que cette aide.

InformationsquelleAutor Mike Zavarello
0

Cependant, cette solution ne peut pas être parfait si vous avez séparé les sprites sur un grand fond, avec les lignes et colonnes sens des choses différentes... (par exemple, les différents logos sur chaque ligne, sélectionné/a plané sur la droite, de la plaine à gauche) Dans ce cas, je vous suggère de séparer la grande image en images distinctes, ou écrire les différentes combinaisons dans le CSS... Selon le nombre de sprites, l'un ou l'autre pourrait être le meilleur choix.

Mine est le problème exact, comme l'a déclaré Orabîg qui a une table comme sprite qui a des colonnes et des lignes.

Ci-dessous est ce que j'ai utilisé comme une 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');   
    }
  });      
}
```
InformationsquelleAutor ace.spades

Vous devez vous connecter pour publier un commentaire.

Utiliser cette

Au lieu de cela