在HTML電子郵件上為Hotmail / Outlook設置背景圖片

Question

我們一直在制作HTML電子郵件，在標題中帶有背景圖片，並在其上方添加一些文本。 我們遇到了麻煩，無法實現，但看起來我設法使它在大多數讀者中都能看到，盡管某些Outlook的用戶沒有按預期顯示圖像，但是可以接受。

我發現有趣的是，似乎根本沒有辦法在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

因此，盡管我可以閱讀有關Stackoverflow的一些回答，說您可以使用完整的“背景”屬性使它在Hotmail上運行，因為Hotmail變成了Outlook.com，但我有這種感覺不再受支持了嗎？

我還使用了以下代碼將其顯示在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]-->

我們擁有標頭的代碼如下：

<!-- 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 -->

我們購買了一個模板來執行此操作，並嘗試對其進行修改，該模板包含背景圖片，但是在不同的閱讀器上進行測試時，即使默認模板看起來也不正確：（（實際上，我必須對其進行修復周圍，​​現在在大多數讀者中都可以接受，但Outlook.com）

非常感謝您的幫助:)

Answer 1

好吧，經過更多研究后，我發現沒有任何一家向我發送競選電子郵件的公司正在使用背景圖片（包括像Amazon，BBC這樣的公司，或許多其他擁有大量現金和令人難以置信的前端的公司），這給了我一個很好的猜測HTML電子郵件上的背景圖像可能不是一個好方法。

我不確定是否有任何方法可以使它們在Hotmail / MSN Live / Outlook.com中工作，因為Litmus表示不支持atm（2015年3月），但我們決定更改設計並使其在沒有背景圖片的情況下工作。

我們仍然可以使用圖像，只是確保我們不需要將它們放在背景上。 那是我們的最終解決方案。

感謝那些花費時間嘗試幫助的人:)

Answer 2

您的代碼對我來說看起來不錯，這是我的一封電子郵件的摘錄，可在所有平台上使用。

  <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>