Skip to content

Instantly share code, notes, and snippets.

@hteumeuleu

hteumeuleu/fake-background-image.html

Created July 18, 2017 20:45
Show Gist options
  • Save hteumeuleu/2caa434cf46075bcdf60d65f710f6ac4 to your computer and use it in GitHub Desktop.
Save hteumeuleu/2caa434cf46075bcdf60d65f710f6ac4 to your computer and use it in GitHub Desktop.
Download ZIP
Fake background with a real image in email
Raw
fake-background-image.html
<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<meta charset="UTF-8" />
<title>Fake background in emails</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body style="margin:0; -webkit-text-size-adjust:none; text-size-adjust:none; background:#000;">
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" align="center" style="width:720px;" role="presentation"><tr><td style="height:240px; vertical-align:middle; font-size:0px; line-height:0px; mso-line-height-rule:exactly;">
<![endif]-->
<div style="max-width:720px; margin:0 auto;">
<!--[if mso]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" style="width:720px; height:240px; position:absolute; top:0; left:0; border:0; z-index:-1;" src="http://i.imgur.com/ZvweZV6.jpg" />
<![endif]-->
<!--[if !(mso | IE)]><!-->
<div style="max-height:0; overflow:visible!important;">
<img src="http://i.imgur.com/ZvweZV6.jpg" alt="" style="display:block; width:100%; max-width:720px;" />
</div>
<!--<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tr>
<td style="padding-bottom:33.3333%; width:0.01%;"></td>
<td style="vertical-align:middle; text-align:center;">
<h1 style="margin:0; font:bold 32px/1.5 sans-serif; color:#fff; text-align:center;">Hello world</h1>
</td>
<td style="padding-bottom:33.3333%; width:0.01%;"></td>
</tr>
</table>
<p style="margin:10px 0; text-align:right; font:11px sans-serif; color:#999;"><a href="https://earth.jsc.nasa.gov/SearchPhotos/photo.pl?mission=ISS022&roll=E&frame=6674" style="color:#999;">Photo courtesy of NASA</a></p>
</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment