A CodePen by Nick Schonning. Trying to replace image gradient - Trying to replace the header div in the linked example with a fixed px sized header. An icon sprite will be added as the second background layer if the gradient works

index.html

<div class="module-info">
  <p>The date has a <code>float:left;</code> attribute applied to it, so a <code>&lt;div class="clear"&gt;&lt;/div&gt;</code> is needed afterwards to start a fresh line.</p> 
  <p>Also, the design is more refined looking in modern browsers, whereas it's simplified for users with IE7/8.</p>
</div>
<p>This should look like the div to the right <a href="http://wet-boew.github.com/wet-boew/demos/grids/grid-other-eng.html#date">here</a> but with the correct sprite icon
</p>

style.scss

@import "compass";
.module-info {
  padding-top: 30px;
  outline-color: #2A7DA6;
  outline-style: solid;
  outline-width: 1px;
  @include background-image(url(https://raw.github.com/wet-boew/wet-boew/master/src/grids/images/mail.png), linear-gradient(#2C7D98 10px, #297390 20px, #216383 30px, white 1%));
  background-repeat: no-repeat;
  background-position: 5px 5px,0 0;
}