Backgroundpositionx Not Working on Firefox

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.

Background position fixed not working in firefox

I had found some fails in your code. Try again.

<td style="width: 100%; background-color: #FFFFFF; vertical-align:baseline; height:500px; background: url('path/to/you/image.png') no-repeat center center fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover;">

Fixed position background image in Firefox doesn't work with transformed element. Is this a FF bug?

Unfortunately this is not bug, but a change of scope.

There was a problem where browsers were inconsistent in their behaviour with background-attachment:fixed; inside transformed elements, which was causing additional inconsistencies with 3D transforms.

The spec for background-attachment was adjusted to include a rule that elements within transformed elements would have their background-attachment rules set to scroll.

Firefox and Edge have both conformed to the new spec, Chrome has so far not deployed the change on their side (at the time of posting this, their bugtracker shows 30 Nov as their end date)

Workaround:

The quickest and easiest way to work around this change of spec would be to use a parallax library to hit this for you. A fairly popular one is called Skrollr, and I've adjusted your fiddle to include it.

Essentially you can just add data-0 and data-10000 attributes to your element, and then initialise the library using skrollr.init();

This has the drawback of using a library for something that was previously achievable in clean CSS, but it does also carry positive weight in that a parallax background is much easier on the eyes than a fixed background.

background-attachment: fixed; is not working in firefox

If you disable this on the .page-container class:

-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

It should be better.

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

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

background-image have incorrect position in firefox but in chrome is rightly

Separate background positions for x & y aren't approved in the CSS spec so

background-position-x: 80%;
background-position-y: bottom;

may work in Chrome but not in other browsers.

http://www.w3.org/TR/css3-background/#background-position

background-attachment: fixed not working as expected in firefox

It looks that, though counter-intuitive, the behavior of Firefox(and Edge) is intended and correct as per spec: the transform property (used by the GSAP library for animation) makes background-attachment: fixed behave as scroll. So I'd suggest removing background-attachment: fixed and replacing it with different background-position values for each slice of the image.

May be this answer would also be relevant: https://stackoverflow.com/a/43067630/2533215