title: CSS3 transition of background-image for Firefox not working
body: <p>My background-image transition is working fine in Chrome, but does nothing in Firefox. I am new to CSS3 transitions. Did research and my syntax seems to be correct. From what I have read FF should support this. I am on FF 12.0. How come this CSS3 transition does not work in Firefox. </p>
  
  <p>No javascript. No workarounds. Just an explanation of why this is failing would be wonderful.</p>
  
  <p><a href="http://jsfiddle.net/VCdGt/3/" rel="noreferrer">http://jsfiddle.net/VCdGt/3/</a></p>
  
  <pre><code>a.call_to_action
  {
      text-decoration: none;
      display: block;
      color: #232744;
      font-size: 20px;
      font-weight: bold;
      height: 47px;
      width: 185px;
      overflow: hidden;
      margin: 10px auto 15px auto;
      text-align: center;
      border: none;
      background: yellow;
      background-image: url(http://www.pslover.com/images/thumb/2751.jpg);
      -webkit-transition: background-image .5s linear;
      -moz-transition: background-image .5s linear;
  }
  
  a.call_to_action:hover {
      background: orange;
      background-image: url(http://www.tutorialdash.com/avatars/3b1f70c20325d8676ce1f56cb9b43f17.gif);
      color: #4F4246;
  }
  </code></pre>