title: Background image (transparent 24 bit PNG) fading issue in IE7 / IE8
body: <p>I have a content element which fades in if the user is above a certain area. The content element has a <strong>background image</strong>, which is in IE7/IE8 only a big black border instead of a gradient.</p>
  
  <p>Animation code:</p>
  
  <pre><code>$(function(){
   $('#TopPackets').mouseenter(function(){
   jQuery('#TopPacketsContents').animate({
     opacity: 1,
     width: 'toggle'
   }, 307, function() {
   });
   });
  
   $('#TopPackets').mouseleave(function(){
     jQuery('#TopPacketsContents').hide('slow');
   });
  });
  </code></pre>
  
  <p>Now the content element with the transparent background image:</p>
  
  <pre><code>&lt;div id="TopPacketsContents" style="opacity: 1; display: none;"&gt;
      &lt;!-- content --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#TopPacketsContents {
   background-image: url("../images/transparentBackground.png");
   background-repeat: no-repeat;
   height: 303px;
   width: 411px;
  }
  </code></pre>
  
  <p>I tried the high ratest answer of <a href="https://stackoverflow.com/questions/1251416/png-transparency-problems-in-ie8">this thread</a>, but I cannot set background: transparent because I have a background image! </p>
  
  <p>I also tried to create a wrapper element like <a href="http://blog.pengoworks.com/index.cfm/2009/2/17/Fading-a-24bit-transparent-PNG-in-IE7" rel="nofollow noreferrer">on this page</a>.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="TopPacketsContents"&gt;
      &lt;div class="BackgroundImageWrapper"&gt;    
          &lt;!-- content --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#TopPacketsContents {
      height: 303px;
      width: 411px;
  }
  .BackgroundImageWrapper {
      background-image: url("../images/TopPacketsBackground.png");
      background-repeat: no-repeat;
  }
  </code></pre>
  
  <p>So what are my options? I could use a non transparent image only for IE7/IE8 with conditional comments (would look ugly). Should I use another animation? Should I use a hover effect instead of the animation (only for IE7/IE8)? Are there any other fixes out there?</p>