Почта Outlook загружает фоновое изображение только при нажатии

Я боролся с этим некоторое время, и я не могу получить никакого ответа.

Я хотел использовать фоновое изображение в шаблоне электронной почты, который отлично работает на всех почтовых клиентах, таких как gmail, yahoo и т. д., используя атрибут фона в таблице HTML. Но это не работает в электронной почте Outlook Desktop. Поэтому для этого я использовал VML и смог это сделать.

Но проблема в том, что фоновое изображение загружается только после нажатия на фоновую область.

<table width='600' height='800' align='center' style='min-hwight:800px;' cellpadding='0' cellspacing='0'>
<tr>
    <td background='[background-image]' bgcolor='#baeef7' width='600' height='800' valign='top' align='center'>
        <!--[if gte mso 9]>
        <v:rect xmlns:v='urn:schemas-microsoft-com:vml' fill='true' stroke='false' style='width:600px;height:800px;'>
        <v:fill type='tile' src='[background-image]' color='#baeef7' />
        <v:textbox inset='0,0,0,0'>
        <![endif]-->
        <div>
            <table align='center' width='600' height='800' style='width:600px;height:800px' cellpadding='0' cellspacing='0'>
                <tr height='80'>
                    <td width='175' style='width:175px;text-align:right;' align='right'>
                        Header Image
                    </td>
                    <td width='250' style='width:250px;'></td>
                    <td width='175' style='width:175px'></td>
                </tr>
                <tr>
                    <td width='175' valign='bottom' style='width:175px'><img src='https://www.subsource.com/ContentPages/images/template-1-175.png' alt='' /></td>
                    <td width='250' height='160' valign='middle' style='padding:0 7px;width:250px'>
                        <span style='font-size:36px;text-align:left;color:#fff;text-transform:uppercase;display:block; font-family: Myriad Pro, Gill Sans, Calibri, sans-serif;font-weight:bold;letter-spacing: 1px;'>
                            Some Text HERE 
                        </span>
                        </td>
                    <td width='175' style='width:175px' valign='bottom'></td>
                </tr>
                <tr height='250'>
                    <td width='175' style='width:175px'>&nbsp;</td>
                    <td style='width:250px;height:250px;text-align:center;width:175px' height='250' width='250' cellpadding='0' cellspacing='0'>
                       <div style='background-color: #FFFFFF;margin:0;padding:0;width:250px;height:250px;'>
                           Image Here
                        </div>  
                    </td>
                    <td width='175' style='width:175px'>&nbsp;</td>
                </tr>
                <tr>
                    <td width='175' valign='top' style='width:175px'>&nbsp;</td>
                    <td width='250' valign='top' style='width:250px;color: #119346; text-align: left; font-family: Myriad Pro, Gill Sans, Calibri, sans-serif;padding:0 7px'>

                        <div style='font-size: 30px;line-height:1; font-family: Myriad Pro, Gill Sans, Calibri, sans-serif;text-transform:capitalize;font-weight:bold;'>Hello Abc</div>
                        <div style='font-size: 17px;line-height:1;margin-top: 4px;font-family: Myriad Pro, Gill Sans, Calibri, sans-serif;text-transform:capitalize;font-weight:bold;'> Address: 123 456 798 789  </div>
                        <div style='font-size: 15px;line-height:18px; font-family: Myriad Pro, Gill Sans, Calibri, sans-serif;margin-top:5px;'> Some text goes here. Some text goes here. Some text goes here. Some text goes here.
                        </div>
                    </td>
                    <td width='175' valign='top' style='width:175px'>&nbsp;</td>
                </tr>
                <tr>
                    <td width='175' height='65' style='width:175px'></td>
                    <td width='250' height='65' style='width:250px'></td>
                    <td width='175' height='65' style='width:175px'></td>
                </tr>
                <tr height='30'>
                    <td colspan='3'>&nbsp;</td>
                </tr>
            </table>  
        </div>
    <!--[if gte mso 9]>
    </v:textbox>
    </v:rect>
    <![endif]-->
    </td>
</tr></table>

Пожалуйста, предложите мне какое-нибудь решение. Это требование, которое я должен выполнить.

Спасибо


person Akhilesh Sehgal    schedule 04.11.2017    source источник
comment
вы пробовали тот же VML в меньшей части шаблона? Он все еще делает то же самое? Лично у меня никогда такого не было. Какой вид вы используете?   -  person Syfer    schedule 04.11.2017


Ответы (1)


Попробуйте удалить все valign align из кода. Вместо этого используйте не bgcolor, а background-color.

Это решило мою проблему, когда у меня была такая же проблема. Стоит попробовать.

person holden    schedule 04.11.2017
comment
Valign работает с электронной почтой. Не думайте, что это вызовет проблемы. - person Syfer; 05.11.2017
comment
Не удалось решить эту проблему с помощью этого решения. - person Akhilesh Sehgal; 09.11.2017