Skip to content

Instantly share code, notes, and snippets.

@hteumeuleu

hteumeuleu/fake-background.html

Created July 18, 2017 19:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save hteumeuleu/c65c701cf0de338df100938939cbd287 to your computer and use it in GitHub Desktop.
Save hteumeuleu/c65c701cf0de338df100938939cbd287 to your computer and use it in GitHub Desktop.
Download ZIP
Fake background in email
Raw
fake-background.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:#fff;">
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" align="center" style="width:700px;" role="presentation"><tr><td style="font-size:0px; line-height:0px; mso-line-height-rule:exactly;">
<![endif]-->
<div style="max-width:700px; margin:0 auto;">
<div style="padding:20px;">
<!--[if mso]>
<v:rect style="position:absolute; top:10px; left:0; z-index:-1; width:700px; height:5px;" stroke="false" fillcolor="#3b5998"></v:rect>
<v:rect style="position:absolute; top:15px; left:0; z-index:-1; width:700px; height:5px;" stroke="false" fillcolor="#ffffff"></v:rect>
<v:rect style="position:absolute; top:20px; left:0; z-index:-1; width:700px; height:5px;" stroke="false" fillcolor="#3b5998"></v:rect>
<v:rect style="position:absolute; top:25px; left:0; z-index:-1; width:700px; height:5px;" stroke="false" fillcolor="#ffffff"></v:rect>
<v:rect style="position:absolute; top:30px; left:0; z-index:-1; width:700px; height:5px;" stroke="false" fillcolor="#3b5998"></v:rect>
<v:rect style="position:absolute; top:35px; left:0; z-index:-1; width:700px; height:5px;" stroke="false" fillcolor="#ffffff"></v:rect>
<v:rect style="position:absolute; top:40px; left:0; z-index:-1; width:700px; height:5px;" stroke="false" fillcolor="#3b5998"></v:rect>
<![endif]-->
<div style="height:0; max-height:0; overflow:visible!important;">
<div style="line-height:0; height:10px; background:#fff;"></div>
<div style="line-height:0; height:5px; background:#3b5998;"></div>
<div style="line-height:0; height:5px; background:#fff;"></div>
<div style="line-height:0; height:5px; background:#3b5998;"></div>
<div style="line-height:0; height:5px; background:#fff;"></div>
<div style="line-height:0; height:5px; background:#3b5998;"></div>
<div style="line-height:0; height:5px; background:#fff;"></div>
<div style="line-height:0; height:5px; background:#3b5998;"></div>
</div>
<p style="margin:0; text-align:center;"><img src="http://i.imgur.com/nWuEPXr.png" alt="Hello world" width="220" height="55" style="display:block; margin:0 auto; color:#fff; text-align:center; font:bold 1em/1.5 -apple-system, sans-serif;" /></p>
<p style="margin:1em 0; font:16px/1.5 -apple-system, sans-serif; text-align:justify;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum consequatur magnam cupiditate aliquid nihil saepe, molestiae corrupti modi earum unde, doloremque sequi et quae architecto iusto provident obcaecati possimus. Maxime.
</p>
<p style="margin:1em 0; font:16px/1.5 -apple-system, sans-serif; text-align:justify;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quibusdam velit ut quos porro id ducimus itaque, fugit, vero nostrum eveniet vitae natus, alias deleniti dicta nulla delectus consequatur perspiciatis!
</p>
<p style="margin:1em 0; font:16px/1.5 -apple-system, sans-serif; text-align:justify;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam incidunt neque veniam amet ab error, delectus, consequatur aliquid unde autem voluptate in facere illo ad perferendis omnis dolorum facilis tenetur?
</p>
</div>
</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