We've been making an HTML Email with a background image in the header and some text over it. We got into some trouble to make it happen but looks like I managed to make it look in most readers though some Outlook ones didn't display the image as expected but that could be acceptable.
我们一直在制作一个HTML电子邮件,标题中有背景图片,上面有一些文字。我们遇到了一些麻烦让它发生但看起来我设法让它看起来在大多数读者虽然一些Outlook没有按预期显示图像,但这是可以接受的。
What I found interesting is that there doesn't seem to be any way at all to display a background image on Hotmail/Outlook.com/MSN reader. I've been using litmus.com to verify and preview and a code analysis gives me this info:
我发现有趣的是,似乎没有任何方法可以在Hotmail / Outlook.com / MSN阅读器上显示背景图像。我一直在使用litmus.com来验证和预览,代码分析给了我这个信息:
background-color is unsupported
background repeat is unsupported
background position is unsupported
background url is unsupported
background is unsupported
So while I can read some answers around * saying you can make it work on Hotmail using the full "background" property as Hotmail has turned into outlook.com I have the feeling such thing isn't supported anymore?
因此,虽然我可以阅读*的一些答案,说你可以使用完整的“后台”属性使其在Hotmail上工作,因为Hotmail已经变成了outlook.com我觉得这样的东西不再受支持了吗?
I've also used this code to display it on Outlook (I think):
我也用这个代码在Outlook上显示它(我认为):
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
<v:fill type="tile" src="https://www.google.co.uk/images/srpr/logo11w.png" id="BGheaderChange_outlook" class="stay" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
The piece of code where we have the header looks like this:
我们有标题的代码片段如下所示:
<!-- Header -->
<table style="background-color: #00a8e2; position: relative; left: 0px; top: 0px;" class="full" align="center" bgcolor="#00a8e2" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="background: #00a8e2 url('https://www.google.co.uk/images/srpr/logo11w.png') no-repeat center top; background-size: cover;" id="BGheaderChange" align="center">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
<v:fill type="tile" src="https://www.google.co.uk/images/srpr/logo11w.png" id="BGheaderChange_outlook" class="stay" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<!-- Wrapper -->
<table class="mobile" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<!-- Nav Mobile Wrapper -->
<table class="full" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td align="center" width="100%">
<!-- SORTABLE -->
<div class="sortable_inner ui-sortable">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="full" object="drag-module-small" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td height="100" width="100%"></td>
</tr>
</table><!-- End Space -->
<!-- Text -->
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="mobile" object="drag-module-small" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td style="font-size: 47px; color: #ffffff; text-align: center; font-family: Helvetica,Arial,sans-serif; line-height: 50px; font-weight:bold; vertical-align: top;" class="font32" align="center" width="100%">
<p cu-identify="element_0033719102905743314">
<span style="color: rgb(255, 255, 255); font-weight: 900; " class="font40"><span style="font-family: 'Arial'; font-weight: bolder; word-break: break-word; letter-spacing: 1.3px;"><strong>The title of the email!!</strong></span></span>
</td>
</tr>
</table>
<table cu-identifier="element_07614343859779409" style="border-collapse: collapse; position: relative; left: 0px; top: 0px;" class="mobile" object="drag-module-small" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td height="20" width="100%"></td>
</tr>
</table>
<!-- Button -->
<!-- End Button -->
<div style="display: none;" id="element_0016519852050701167"></div><!-- End Space -->
<table cu-identifier="element_006155826625549221" style="border-collapse: collapse; position: relative; left: 0px; top: 0px;" class="full" object="drag-module-small" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td height="10" width="100%"></td>
</tr>
</table><div id="element_049618199923274187" style="display: none;"></div><div id="element_049618199923274187" style="display: none;"></div><!-- End Space -->
</div><!-- End SORTABLE -->
</td>
</tr>
</table>
</td>
</tr>
</table><!-- End Wrapper -->
</div>
<!--[if gte mso 9.]>
</v:textbox>
</v:fill></v:rect>
<![endif]-->
</div>
</td>
</tr>
</table>
<!-- Header End -->
We bought a template to do this and are trying to modify it, the template included a background image but on testing it on different readers looks like not even the default template does it right :( (In fact I've had to be fixing it around and now looks acceptable in most readers but Outlook.com)
我们买了一个模板来做这个,并试图修改它,模板包括一个背景图像,但在不同的读者测试它看起来甚至没有默认模板做得对:((事实上我必须修复它在大多数读者看来,现在看起来可以接受,但Outlook.com)
Thanks a lot for any help :)
非常感谢任何帮助:)
2 个解决方案
#1
2
Well, after some more research I found that not any single company sending me a campaign email was using background images (including companies like Amazon, the BBC, or many others with plenty of cash and incredible frontenders) which gave me a good guess that using background images on HTML Emails may not be a good approach.
好吧,经过一些更多的研究后,我发现没有任何一家公司向我发送竞选电子邮件是使用背景图片(包括像亚马逊,BBC或许多其他公司,有大量现金和令人难以置信的前端),这让我很好地猜测使用HTML电子邮件上的背景图片可能不是一个好方法。
I'm not sure if there is any way to make them work in Hotmail/MSN Live/Outlook.com as Litmus says it's not supported atm (March 2015) but we decided to change the design and make it work without background images.
我不确定是否有任何方法可以使它们在Hotmail / MSN Live / Outlook.com中运行,因为Litmus表示它不支持atm(2015年3月),但我们决定更改设计并使其无需背景图像。
We can still use images, just making sure we don't need them to be on the background. That was our final solution.
我们仍然可以使用图像,只是确保我们不需要它们在背景上。这是我们的最终解决方案。
Thanks to those who spent their time trying to help though :)
感谢那些花时间尝试帮助的人:)
#2
0
Your code looks good to me, this is a snippet from one of my emails which works across all platforms.
您的代码对我来说很好,这是我的一封电子邮件的片段,可以在所有平台上运行。
<td background="hero2.jpg" bgcolor="#c8c7bc" width="600" height="294" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:294px;">
<v:fill type="tile" src="hero2.jpg" color="#c8c7bc" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table cellspacing="0" cellpadding="0">
<tr>
<td width="598" height="293" style="text-align:left;">
<table width="400">
<tr>
<td style="padding: 30px 32px;">
<p style="font-size:36px; color: #575858; margin:0;font-family: arial, serif;">Secure your<br/>online identity</p>
<p style="font-size:26px; color: #575858; margin:24px 0 18px;font-family: arial, serif;">@DOMAINNAME@ is publicly available now</p>
<a style="font-size:17px; color: #575858; margin:0;
font-weight:bold;
text-decoration:none;
padding: 6px;
border: 2px solid #575858;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-family: arial, serif;
" href="#"><img align="absmiddle" style="border-style: none;" src="lock2.png" alt="" /> SECURE IT NOW WITH UK2</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>#1
2
Well, after some more research I found that not any single company sending me a campaign email was using background images (including companies like Amazon, the BBC, or many others with plenty of cash and incredible frontenders) which gave me a good guess that using background images on HTML Emails may not be a good approach.
好吧,经过一些更多的研究后,我发现没有任何一家公司向我发送竞选电子邮件是使用背景图片(包括像亚马逊,BBC或许多其他公司,有大量现金和令人难以置信的前端),这让我很好地猜测使用HTML电子邮件上的背景图片可能不是一个好方法。
I'm not sure if there is any way to make them work in Hotmail/MSN Live/Outlook.com as Litmus says it's not supported atm (March 2015) but we decided to change the design and make it work without background images.
我不确定是否有任何方法可以使它们在Hotmail / MSN Live / Outlook.com中运行,因为Litmus表示它不支持atm(2015年3月),但我们决定更改设计并使其无需背景图像。
We can still use images, just making sure we don't need them to be on the background. That was our final solution.
我们仍然可以使用图像,只是确保我们不需要它们在背景上。这是我们的最终解决方案。
Thanks to those who spent their time trying to help though :)
感谢那些花时间尝试帮助的人:)
#2
0
Your code looks good to me, this is a snippet from one of my emails which works across all platforms.
您的代码对我来说很好,这是我的一封电子邮件的片段,可以在所有平台上运行。
<td background="hero2.jpg" bgcolor="#c8c7bc" width="600" height="294" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:294px;">
<v:fill type="tile" src="hero2.jpg" color="#c8c7bc" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table cellspacing="0" cellpadding="0">
<tr>
<td width="598" height="293" style="text-align:left;">
<table width="400">
<tr>
<td style="padding: 30px 32px;">
<p style="font-size:36px; color: #575858; margin:0;font-family: arial, serif;">Secure your<br/>online identity</p>
<p style="font-size:26px; color: #575858; margin:24px 0 18px;font-family: arial, serif;">@DOMAINNAME@ is publicly available now</p>
<a style="font-size:17px; color: #575858; margin:0;
font-weight:bold;
text-decoration:none;
padding: 6px;
border: 2px solid #575858;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-family: arial, serif;
" href="#"><img align="absmiddle" style="border-style: none;" src="lock2.png" alt="" /> SECURE IT NOW WITH UK2</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>