title: How to set a email head with background image?
body: <p>I am struggling with this piece of code. I have created this header which basically consist of a table with 2 rows and this what am trying to do:</p>
  
  <ol>
  <li>The shadow (bottom part of cid:img-headerbg) has to be at the bottom (how to change cid:img-headerbg to apply on table?)</li>
  <li>How to remove this gap, so that yellow line is at bottom?
  <a href="https://i.stack.imgur.com/T576C.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T576C.jpg" alt="enter image description here"></a></li>
  </ol>
  
  <p>This is my header:</p>
  
  <pre><code>    &lt;table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: {{accent_color}};"&gt;
          &lt;tr&gt;
              &lt;td background="cid:img-headerbg" bgcolor="{{accent_color}}" valign="bottom" style="background-color:{{accent_color}};background-image: url('cid:img-headerbg');background-size:100% 100%; background-repeat:repeat-x; background-position: top left;"&gt;
                  &lt;!--[if gte mso 9]&gt;
                  &lt;v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;"&gt;
                    &lt;v:fill type="frame" size="100%,100%" src="cid:img-headerbg" color="#eb847b" /&gt;
                    &lt;v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"&gt;
                  &lt;![endif]--&gt;
                  &lt;div style="max-width: 680px; margin: 0 auto;"&gt;
                      &lt;!--[if mso]&gt;
                      &lt;table role="presentation" cellspacing="0" cellpadding="0" border="0" width="680" align="center"&gt;
                      &lt;tr&gt;
                      &lt;td&gt;
                      &lt;![endif]--&gt;
                      &lt;table style="border:0;border-collapse:collapse;margin:0 auto;padding:0" align="center" border="0" cellpadding="0" cellspacing="0"&gt;
                          &lt;tr&gt;
                              &lt;td height="30"&gt;
                                  &amp;nbsp;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td style="margin:0 auto;padding:0;text-align:center;" align="center" width="100%"&gt;
                                  &lt;a href="{{base_url}}" style="display: block; top: 0; outline: medium none; text-align: center; text-decoration: none; margin:0 auto;" align="center"&gt;
                                      &lt;img alt="{{company_name}}" label="{{company_name}}" src="cid:img-logo" style="border: 0px; display: block; max-width: 100%; max-height: 100%; margin:0 auto;" /&gt;
                                  &lt;/a&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td style="color:#ffffff;font-family:'Roboto','Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:20px;font-weight:400;line-height:25px;margin:0 auto;padding:15px 0;text-align:center;text-decoration:none" align="center" width="100%"&gt;
                                  {{header_title}}&lt;br /&gt;
                                  &lt;small&gt;{{header_subtitle}}&lt;/small&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                      &lt;!--[if mso]&gt;
                      &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;/table&gt;
                      &lt;![endif]--&gt;
                  &lt;/div&gt;
                  &lt;!--[if gte mso 9]&gt;
                    &lt;/v:textbox&gt;
                  &lt;/v:rect&gt;
                  &lt;![endif]--&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td background="cid:img-colour_stripe" bgcolor="{{primary_color}}" valign="bottom" style="background-color:{{primary_color}};background-image: url('cid:img-colour_stripe');background-size:100% 2px;background-repeat:repeat-x; background-position: bottom left;"&gt;
                  &lt;!--[if gte mso 9]&gt;
                  &lt;v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;"&gt;
                                  &lt;v:fill type="frame" size="100%,2px" style="background-size:100% 2px;background-repeat:repeat-x; background-position: bottom left;" src="cid:img-colour_stripe" color="#eb847b" /&gt;
                                  &lt;v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"&gt;
                                &lt;![endif]--&gt;
                  &lt;div style="max-width: 680px; margin: 0 auto;background-color: #ffffff;"&gt;
                      &lt;!--[if mso]&gt;
                      &lt;table role="presentation" cellspacing="0" cellpadding="0" border="0" width="680" align="center" bgcolor="#ffffff" style="margin: 0 auto;padding:0;"&gt;
                      &lt;tr&gt;
                      &lt;td&gt;
                      &lt;![endif]--&gt;
                      &lt;table cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 0 auto;"&gt;
                          &lt;tr&gt;
                              &lt;td height="100%" valign="top" width="100%" style="padding: 10px 0; background-color: #ffffff;margin:0;"&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                      &lt;!--[if mso]&gt;
                      &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;/table&gt;
                      &lt;![endif]--&gt;
                  &lt;/div&gt;
                  &lt;!--[if gte mso 9]&gt;
                    &lt;/v:textbox&gt;
                  &lt;/v:rect&gt;
                  &lt;![endif]--&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>