Responsive Email Header

ResponsiveEmailHeader.html

Add this to the head tag of your template within the CSS style block
@media only screen and (max-width: 640px) {
  .hero-banner {
    background-size: 120% !important;
    background-position: left 45% !important;
  }
}
Remove this line and everything above after pasting the CSS into the head tag

%%[
Set @imageURL = "YOUR IMAGE URL HERE"
Set @altTag = "YOUR ALT TAG"
Set @width = "600"
]%%

<!--[if mso]>
<table width="100%" cellspacing="0" cellpadding="0" role="presentation">
      <tr>
            <td align="center">
                  <img src="%%=v(@imageURL)=%%" alt="%%=v(@altTag)=%%" width="%%=v(@width)=%%" style="display: block; padding: 0px; text-align: center; border: 0px solid transparent; height: auto; width: 100%;">
            </td>
      </tr>
</table>
<div style="display:none">
<![endif]-->
<div class="hero-banner" style="
      width: %%=Concat(@width,'px')=%%;
      height: 125px; 
      background-size: %%=Concat(@width,'px')=%%;
      background-repeat: no-repeat;
      background-position: left center;
      background-image: url('%%=v(@imageURL)=%%')">
</div>

<!--[if mso]>
</div>
<![endif]-->