title: Transparent Background Image with a Gradient
body: <p>Today I was designing a transparent PNG background that would only sit in the top left of a div, and the rest of the div would maintain a gradient background for all transparent areas of the PNG, and the rest of the div itself.</p>
  
  <p>It might be better to explain through the code I thought might work:</p>
  
  <pre><code>#mydiv .isawesome { 
      /* Basic color for old browsers, and a small image that sits in the top left corner of the div */
      background: #B1B8BD url('../images/sidebar_angle.png') 0 0 no-repeat;
  
      /* The gradient I would like to have applied to the whole div, behind the PNG mentioned above */
      background: -moz-linear-gradient(top, #ADB2B6 0%, #ABAEB3 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ADB2B6), color-stop(100%,#ABAEB3));
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ADB2B6', endColorstr='#ABAEB3',GradientType=0 );
  }
  </code></pre>
  
  <p>What I've been finding is that most browsers pick one or the other - most choosing the gradient since its further down the CSS file.</p>
  
  <p>I know some of the guys around here will say "just apply the gradient to the PNG you're making" - but thats not ideal because the div will maintain a dynamic height - sometimes being very short, sometimes being very tall. I know this gradient isn't <em>essential</em> but I thought it might be worth asking y'all what you thought.</p>
  
  <p><strong>Is it possible to have a background image, while keeping the rest of the background as a gradient?</strong></p>