Background-Position-Y Doesn't Work in Firefox (Via CSS)

CSS - Background position not working in Firefox

You are using a non-standard CSS property that works in Chrome but not Firefox.

See: Is background-position-x (background-position-y) a standard W3C CSS property?

However, standard background properties will take care of the issue.

jQuery background position doesn't work in FireFox?

You can always create your own little plugin, it's not that hard.

Using jQuery 1.8 we now have access to the $.Animation method that gives us the animated values directly without to much work, so we can do something like :

$.fn.animateBG = function(x, y, speed) {
    var pos = this.css('background-position').split(' ');
    this.x = parseInt(pos[0]) || 0;
    this.y = parseInt(pos[1]) || 0;
    $.Animation( this, {
        x: x,
        y: y
      }, { 
        duration: speed
      }).progress(function(e) {
          this.css('background-position', e.tweens[0].now+'px '+e.tweens[1].now+'px');
    });
    return this;
}

And then to use it we can do:

$("#background").animateBG(x-value, y-value, speed);​

live example:
$("#background").animateBG("0px", "-45px", 300);​

FIDDLE

Disclaimer: This is not a finished and tested plugin, but something I spent ten minutes creating in jsFiddle, but test it out and do the changes you need to, and it should work just fine for you.

backgroundPositionX not working on Firefox

Firefox doesn't support backgroundPositionX, but it does support background position

So we can do something like this:

psy.style.backgroundPosition = x+'px 0';

This sets the background position, X first, then Y.

Working example here

Animate background position y in Firefox with Jquery

background-position-x/y is not really part of any CSS spec, its IE specific CSS, added to IE5.5, and later implemented by Webkit.

Opera and Firefox do not accept it.

The best solution is to use the step method, that will let you animate just about anything.

To add a little to Luka's answer, which is somewhat wrong even though the method is correct, the easiest way to use the step method is to animate some arbitrary value, and hook a step to it, something like:

$('elem').animate({
  'border-spacing': -1000
},
{
  step: function(now, fx) {
    $(fx.elem).css("background-position", "0px "+now+"px");
  },
  duration: 5000
});

The element will have to be wrapped jQuery style to accept jQuery methods, like css().
I've used border-spacing, but any css property that will not affect your site will work, just remember to set an initial value in your CSS for the css property used.

The step method can also be used alone, if you set the fx.start and fx.end values, using it like Luka does with now+=1 is pretty much equal to just using a setInterval instead, but the idea was sound all the same.

FIDDLE

EDIT:

with newer versions of jQuery there are other options as well, see this answer :

JQuery Animate Background Image on Y-axis

Animating linear css background not working in firefox

Try animating both params background-position: 0% 0;. Also missing non-prefixed animation rule.

.menu_block {  height: 100px;  width: 500px;  background: repeating-linear-gradient(45deg, #000, #000 20px, #fff 20px, #fff 40px);  background-size: 56px 56px;  background-position: 0 0;  -webkit-animation: slide 30s infinite linear forwards;  animation: slide 30s infinite linear forwards;}@keyframes slide {  0% {    background-position: 0 0;  }  100% {    background-position: 100% 0;  }}@-webkit-keyframes slide {  0% {    background-position: 0 0;  }  100% {    background-position: 100% 0;  }}

<div class="menu_block">
</div>

input[type=radio]:checked + label with background-position-y doesn't work in Firefox

The background-position-x and background-position-y are level 4 CSS

• RESOLVED: background-position-x/-y, background-repeat-x/-y
  approved for level 4 of backgrounds and borders.
• background-size-x/-y was also discussed, but didn't garner much
  support.

---

It isn't supported in Firefox (yet, it will be in FF version 50), see Can I Use

---

you can use background-position instead:

input[type=radio]:checked + label {
  background-position: 0 -40px; /* background-position-x | background-position-y  */
}

---

label {  display: block;  font-family: 'Muli';  font-size: 14px;  color: #666;  vertical-align: top;  background: url("https://s31.postimg.org/w3j8tei7f/bullet.png") no-repeat;  background-size: 12px 52px;  background-position: 0 1px;  margin-bottom: 2px;}label:hover {  cursor: pointer;}input[type=radio] + label {  padding-left: 15px;}input[type=radio]:checked + label {  background-position: 0 -40px;}

<div class="vol-radio">  <input type="radio" name="volchoice-dates" id="volchoice-dates-flexibles" value="0" checked>  <label for="volchoice-dates-flexibles">Dates flexibles</label>  <input type="radio" name="volchoice-dates" id="volchoice-direct" value="1">  <label for="volchoice-direct">Vol direct</label></div>

firefox background position percentage not working

FF doesn't know about background-position-x, he knows only about background-position. So you can write this like:

#process-section #process-idea.process .image-block {
    background-position: -200% 0;
}

---

Related Topics