How to set a email head with background image? - html

Question

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:
The shadow (bottom part of cid:img-headerbg) has to be at the bottom (how to change cid:img-headerbg to apply on table?)
How to remove this gap, so that yellow line is at bottom?
This is my header:
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: {{accent_color}};">
<tr>
<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;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
<v:fill type="frame" size="100%,100%" src="cid:img-headerbg" color="#eb847b" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div style="max-width: 680px; margin: 0 auto;">
<!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="680" align="center">
<tr>
<td>
<![endif]-->
<table style="border:0;border-collapse:collapse;margin:0 auto;padding:0" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="30">
</td>
</tr>
<tr>
<td style="margin:0 auto;padding:0;text-align:center;" align="center" width="100%">
<a href="{{base_url}}" style="display: block; top: 0; outline: medium none; text-align: center; text-decoration: none; margin:0 auto;" align="center">
<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;" />
</a>
</td>
</tr>
<tr>
<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%">
{{header_title}}<br />
<small>{{header_subtitle}}</small>
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
<tr>
<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;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
<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" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div style="max-width: 680px; margin: 0 auto;background-color: #ffffff;">
<!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="680" align="center" bgcolor="#ffffff" style="margin: 0 auto;padding:0;">
<tr>
<td>
<![endif]-->
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 0 auto;">
<tr>
<td height="100%" valign="top" width="100%" style="padding: 10px 0; background-color: #ffffff;margin:0;"></td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>

Answer 1

Gladly due to some research on my own i found the fix which worked fine for me:
Outlook apparently add empty paragraphs after vml shapes, which was causing the gap. I fix this by adding font-size: 0 and line-height: 0 to the parent container.
https://litmus.com/community/discussions/538-vml-outlook-07-10-13-unwanted-20px-padding-at-the-bottom