Skip to content

Instantly share code, notes, and snippets.

@uglyeoin
Last active November 8, 2021 17:06
Show Gist options
  • Save uglyeoin/d8dde956e5a72558de07cf2a240a15c0 to your computer and use it in GitHub Desktop.
Save uglyeoin/d8dde956e5a72558de07cf2a240a15c0 to your computer and use it in GitHub Desktop.
Background Image with Outlook support in HTML Email
<!-- Full width background image with content. Image is full width but 200px high -->
<div mc:repeatable="options" mc:variant="Main Background Image with Text overlay">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="width:100%;min-height:328px;height:328px;" background="https://gallery.mailchimp.com/fa85a578f928f05fa5750d667/images/cc24d737-fea1-4a47-87fb-517f5fecb2f4.jpg">
<tr>
<td style="font-size: 16px;line-height: 20px; font-family: Georgia, Arial, sans-serif;">
<!--[if gte mso 9]>
<v:rect style="width:600px;height:328px;" strokecolor="none" stroke="false">
<v:fill type="frame" color="#303131" src="https://gallery.mailchimp.com/fa85a578f928f05fa5750d667/images/cc24d737-fea1-4a47-87fb-517f5fecb2f4.jpg" /></v:fill>
</v:rect>
<v:shape id="bgImage" style="position:absolute;width:600px;height:328px;">
<![endif]-->
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="height: 238px;">&nbsp;</td>
</tr>
<tr>
<td class="h1 bold white" mc:edit="background-image-h1">
Aspire Leaderboard in Focus
</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:shape>
<![endif]-->
</td>
</tr>
</table>
</div>
<!-- END Full width background image with content. Image is full width but 200px high -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment