Skip to content

Instantly share code, notes, and snippets.

@jamesmacwhite

jamesmacwhite/background-size-test.html

Last active August 29, 2015 14:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jamesmacwhite/54321aab290263605396 to your computer and use it in GitHub Desktop.
Save jamesmacwhite/54321aab290263605396 to your computer and use it in GitHub Desktop.
Download ZIP
When background-size fails (Windows 8 mail app)
Raw
background-size-test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width" />
<title>background-size CSS3 test</title>
<style type="text/css">
#outlook a { padding:0; }
body { width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; }
.ReadMsgBody { width:100%; }
.ExternalClass { width:100%; }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height:100%; }
#wrappertable { margin:0; padding:0; width:100% !important; line-height:100% !important; }
img { outline:none; text-decoration:none; -ms-interpolation-mode:bicubic; }
p { margin:1em 0; }
h1, h2, h3, h4, h5, h6 { color:black !important; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color:blue !important; }
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active { color:red !important; }
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited { color:purple !important; }
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
table td { border-collapse:collapse; }
span.yshortcuts, a span.yshortcuts { color:#000000; background-color:none; border:none; }
span.yshortcuts:hover, span.yshortcuts:active, span.yshortcuts:focus { color:#000000; background-color:none; border:none; }
.appleLinksWhite a, .appleLinksBlack a { text-decoration:none !important; }
.appleLinksWhite a { color:#ffffff !important; }
.appleLinksBlack a { color:#000000 !important; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
td[class="image"] img,
td[class="image2"] img,
td[class="image3"] img {
display:none !important;
}
td[class="image"] {
display:block;
width:250px;
height:167px;
background-image:url(http://jmwhite.co.uk/email-testing/acid/wollaton-hall-2x.jpg);
background-repeat:no-repeat;
background-size:250px auto;
}
td[class="image2"] {
display:block;
width:250px;
height:167px;
background:url(http://jmwhite.co.uk/email-testing/acid/wollaton-hall-2x.jpg);
background-repeat:no-repeat;
background-size:250px auto;
}
td[class="image3"] {
display:block;
width:250px;
height:167px;
background:url(http://jmwhite.co.uk/email-testing/acid/wollaton-hall-2x.jpg) 0 0 / 250px auto no-repeat;
}
}
</style>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="wrappertable" style="table-layout:fixed;">
<tr>
<td align="center" valign="top" id="wrappercell">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="containertable">
<tr>
<td align="left" valign="top" id="containercell">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" valign="top" style="padding-bottom:10px; font-family:Helvetica, Arial, sans-serif; font-size:28px; line-height:32px; letter-spacing:-1px; font-weight:bold;">Testing the background-size CSS property</td>
</tr>
<tr>
<td align="left" valign="top" style="padding-bottom:10px; font-family:Helvetica, Arial, sans-serif; font-size:16px; line-height:19px;">Test #1: Using background-image and background-size</td>
</tr>
<tr>
<td align="left" valign="top" class="image">
<img src="http://jmwhite.co.uk/email-testing/acid/wollaton-hall.jpg" alt="Wollaton Hall" style="display:block;" width="250" height="167" />
</td>
</tr>
<tr>
<td align="left" valign="top" style="padding-top:10px; padding-bottom:10px; font-family:Helvetica, Arial, sans-serif; font-size:16px; line-height:19px;">Test #2: Using background (not background-image) and background-size</td>
</tr>
<tr>
<td align="left" valign="top" class="image2">
<img src="http://jmwhite.co.uk/email-testing/acid/wollaton-hall.jpg" alt="Wollaton Hall" style="display:block;" width="250" height="167" />
</td>
</tr>
<tr>
<td align="left" valign="top" style="padding-top:10px; padding-bottom:10px; font-family:Helvetica, Arial, sans-serif; font-size:16px; line-height:19px;">Test #3: Shorthand background property</td>
</tr>
<tr>
<td align="left" valign="top" class="image3">
<img src="http://jmwhite.co.uk/email-testing/acid/wollaton-hall.jpg" alt="Wollaton Hall" style="display:block;" width="250" height="167" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment