title: CSS3 background image transition
body: <p>I'm trying to make a "fade-in fade-out" effect using the CSS transition. But I can't get this to work with the background image...</p>
  
  <p>The CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.title a {
      display: block;
      width: 340px;
      height: 338px;
      color: black;
      background: transparent;
      /* TRANSITION */
      -webkit-transition: background 1s;
      -moz-transition: background 1s;
      -o-transition: background 1s;
      transition: background 1s;
  }
  
  .title a:hover {
      background: transparent;
      background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
      /* TRANSITION */
      -webkit-transition: background 1s;
      -moz-transition: background 1s;
      -o-transition: background 1s;
      transition: background 1s;
  }​
  </code></pre>
  
  <p>Take a look: <a href="http://jsfiddle.net/AK3La/" rel="noreferrer">http://jsfiddle.net/AK3La/</a></p>