CSS Only Parallax Issue

first time question asker so please bare with me.

I'm trying to do a CSS only parallax background for the site I'm working on (the fuzzy mountain one). http://ift.tt/2hb5BnY

I'm using this link to try to figure it out. http://ift.tt/2gTNVwL

So basically my container (#page), has the following styles on it for containing parallax.

  #page{
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    perspective: 1px;
    perspective-origin:0 0;     
  }

And the background (.mainBG) I want to parallax has the following:

  .mainBG{
    background:url(../images/bg-image-main.jpg) no-repeat top center;       
    transform-origin:0 0;
    transform:translateZ(-2px) scale(3);
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    width:100%;
    height:100%;
    box-sizing:border-box;
    display:block;
  }

But for some reason I cannot get the background to parallax whatsoever. It just flows with the rest of the background. I feel that I'm missing something really simple but not sure what. Any help is appreciated to help me figure this out.