Изменить фоновое изображение в адаптивных письмах

Question

У меня есть электронная почта, в которой у меня есть ячейка с фоновым изображением. Мне нужно изменить это изображение SRC для мобильных телефонов. Можно ли сделать это? Я вижу много примеров использования <img> тег, но в моем случае это фоновое изображение.

Я решил вырезать фоновое изображение в Outlook (пуленепробиваемого bg было недостаточно), поэтому в основном мой код выглядит так

<!--[if lt mso 9]> <!-->
<td
    background="https://assets.myjobglasses.com/email/campaigns/aladdin/red-carpet.png" bgcolor="#ffffff"
    valign="top" align="center"
    style="background-repeat: no-repeat;"
    height="<%= red_carpet_height %>"
    class="red-carpet-bulletproof-background"
>
<!--<![endif]-->

<!--[if gte mso 9]>
 <td
    valign="top" align="center"
    height="<%= red_carpet_height %>"
    class="red-carpet-bulletproof-background"
>

Вместо этого я хотел бы использовать это изображение на мобильном телефоне. Как я могу это сделать? (Я могу выбрать дублирование кода и добавить несколько классов видимости, но если мои электронные письма слишком длинные, Gmail решит сократить видимую часть, поэтому я бы хотел избежать таких радикальных мер)

Answer 1

Вам нужно настроить таргетинг на этот конкретный класс, содержащий изображение, и изменить его на мобильном устройстве.

@media only screen and (max-width:480px) {
.red-carpet-bulletproof-background{background-image:url();width:300px; height:225px; background-size:100% auto;}
}

Вот рабочий пример:

 @media only screen and (max-width:480px) {
 .table{width:300px !important;}
    .red-carpet-bulletproof-background{background-image:url('https://assets.myjobglasses.com/email/campaigns/aladdin/red-carpet-mobile.png') !important;width:300px; height:225px; background-size:100% auto;}
    }

<table width="600" cellpadding="0" cellspacing="0" border="0" class="table">
<tr>
<td
    background="https://assets.myjobglasses.com/email/campaigns/aladdin/red-carpet.png" bgcolor="#ffffff"
    valign="top" align="center"
    style="background-repeat: no-repeat;"
    height="<%= red_carpet_height %>"
    class="red-carpet-bulletproof-background"
>
Content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque lectus at risus pellentesque pulvinar. Vestibulum vitae bibendum lorem, eu fermentum erat. Fusce viverra ante vel leo placerat euismod. Quisque aliquam lectus nec justo tincidunt iaculis. Pellentesque ultrices suscipit diam, a dapibus nulla. Aenean semper est at dapibus lacinia. Etiam semper lacinia dictum. Donec non fermentum eros. <br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque lectus at risus pellentesque pulvinar. Vestibulum vitae bibendum lorem, eu fermentum erat. Fusce viverra ante vel leo placerat euismod.
<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque lectus at risus pellentesque pulvinar. Vestibulum vitae bibendum lorem, eu fermentum erat. Fusce viverra ante vel leo placerat euismod.
<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque lectus at risus pellentesque pulvinar. Vestibulum vitae bibendum lorem, eu fermentum erat. Fusce viverra ante vel leo placerat euismod.
</td>
</tr>
</table>

Дайте мне знать, если это работает для вас.