
0
Flexible background-image for Outlook
Hello!
I want to build flexible background-image for Outlook when user have different values of Windows font size.
For instance I have markup:
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<div style="max-width: 600px; margin: 0 auto;">
<!--[if mso]>
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="250" valign="middle" background="http://finisterra.1gb.ru/img_email/others/header_vmworld_2016_bg_party_600x250.jpg"
style="background: url('http://finisterra.1gb.ru/img_email/others/header_vmworld_2016_bg_party_600x250.jpg') no-repeat center bottom;
background-color: #11a511; background-size: cover;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:250px;">
<v:fill type="frame" src="http://finisterra.1gb.ru/img_email/others/header_vmworld_2016_bg_party_600x250.jpg" color="#11a511" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="middle" align="center" height="250">
<table width="90%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="25">
<div style="margin: 0; line-height: 0;">
<img style="display: block;" src="http://finisterra.1gb.ru/img_email/others/indent.gif" border="0" alt="" width="1" height="1" />
</div>
</td>
</tr>
<tr>
<td align="left">
<div style="margin: 0;">
<span style="font: 22pt Arial, Sans-Serif; color: #ffffff; text-decoration: none;">
<b>Some text here<br />
<b>Some text here</b><br />
<b>Some text here</b><br />
<b>Some text here</b><br />
<b>Some text here</b><br />
<b>Some text here</b>
</b></span>
</div>
</td>
</tr>
<tr>
<td height="25">
<div style="margin: 0; line-height: 0;">
<img style="display: block;" src="http://finisterra.1gb.ru/img_email/others/indent.gif" border="0" alt="" width="1" height="1" />
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</td>
</tr>
</table>
It looks good in Outlook 2010/13/16:

But when I change the value of windows fonts size:

everything breaks:

How to fix it? Please help!
It is doesn't help - https://backgrounds.cm/