Фоновое изображение CSS внутри html-письма - Gmail не поддерживает

Question

Я хочу отправить html тело письма, как показано ниже, с фоновым изображением css моим пользователям:

<div style='width:500px;height:1000px;background-color:black;background-image:url(http://upl0ad.org/images/mylogo.gif) repeat scroll left top;'>
    My Content
</div>

, но, как видно из ссылки ниже, Google не поддерживает фоновое изображение css!
http://www.campaignmonitor.com/css/

что я могу с этим сделать?

Answer 1

Вы пытались установить атрибут background таблицы?

Этот рекомендуемый метод подробно описан в следующем сообщении в блоге Mailchimp: Фоновые изображения и CSS в электронной почте HTML .

Пример (проверено в Gmail)

    <table background="https://www.google.com/intl/en_com/images/srpr/logo3w.png" width="275" height="95">
        <tr>
            <td>
                Email Content...
            </td>
        </tr>
    </table>

Answer 2

С этим ничего не поделаешь. Использование CSS для установки фонового изображения не поддерживается во многих приложениях для работы с электронной почтой по соображениям безопасности.

Единственный способ показать фон за текстом - создать изображение с текстом на нем и отобразить его с помощью тега <img src="##" />. Тем не менее, всегда не забывайте добавлять ссылку на текстовую версию вашего электронного письма и / или ссылку на основанную на веб-странице копию вашей рассылки.

Кроме того, вы должны помнить, что дизайн новостной рассылки сильно отличается от дизайна сайта . Вы должны игнорировать все обычные стандарты, вам нужно использовать таблицы, встроенные стили, теги img и т. Д.

Посетите эту страницу для нескольких хороших предложений: http://www.sitepoint.com/code-html-email-newsletters/

Также у MailChip (вероятно, самой популярной системы управления информационными бюллетенями) есть несколько очень хороших предложений о том, как кодировать электронные письма HTML:

Answer 3

Обновление от 2019. Пока есть проблемы с добавлением фонового изображения из встроенного изображения в электронное письмо (по крайней мере, я не нашел способа заставить его работать). На самом деле фоновое изображение css прекрасно работает, по крайней мере, для некоторых элементов, если они являются абсолютными URL-адресами ресурса, мой фрагмент, который работает в gmail по состоянию на июнь 2019 года:

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-image:url('https://via.placeholder.com/30x300/09f.png');background-repeat:repeat-x">

Это заставляет меня задуматься, почему это не сработало для автора. У меня есть несколько теорий:

а) тогда это не сработало

b) не работает на элементах div

в) ссылка была сломана

г) пропущена одинарная кавычка

e) одинарные и не двойные кавычки вокруг стиля атрибута

f) несмотря на ширину и высоту стиля div имеет размер 0x0

(некоторые из вышеперечисленных звучат глупо)

Answer 4

Я тестировал на gmail: gmail удалит background-color = # FFFFFF с "background-image", это странно.

"background" работает, поэтому конвертируйте background-color и background-image в "background""in style.

" background-color "= # FEFEFE тоже работает

протестировано 2013-09-10