Как легко поразить каждого подписчика фоновым изображением электронной почты (+ код для этого!)

Здесь изображение подгоняется под ширину и высоту ячейки, включая background-size: cover во встроенные стили CSS и затем помещается в центр. Добавление этих стилей позволяет вам использовать изображение с 2-кратным увеличением - это означает, что вы увидите четкую визуализацию на дисплеях Retina - и его размер будет изменен, чтобы аккуратно вписаться в ваш контейнер, даже если размер контейнера изменяется для визуализации на разных устройствах.

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

Ваше фоновое изображение работает? Посмотрите, как наш код для фоновых изображений работает в вашей электронной почте в самых популярных почтовых приложениях, таких как Gmail и Outlook. Узнать больше →

Сегодня большинство почтовых клиентов поддерживают встроенные стили фона CSS, поэтому вы можете добавить фоновое изображение и резервный цвет, используя сокращенное свойство CSS фона. Другими словами, просто примените их к стилю «фон». К сожалению, дальнейшее оформление фона не слишком хорошо работает с сокращением при встроенном кодировании, поэтому любое позиционирование или изменение размера необходимо записывать как отдельные стили. Например, используя background-position: center; размер фона: 80%; вместо фона: центр / 80%; .

Как заставить это работать в Outlook с резервным вариантом VML

Outlook и Office 365 для настольных ПК также нуждаются в небольшой помощи для отображения фоновых изображений, поскольку они тоже не будут отображать стили фона CSS. Чтобы наше фоновое изображение отображалось в этих почтовых клиентах, нам нужно использовать технику, популяризированную Стигом Мортеном Майром для Campaign Monitor, и применить язык векторной разметки Microsoft (VML).

Взяв код, который мы уже создали, мы помещаем требуемый VML и содержащий <div> в нашу ячейку таблицы:

Для изображений, которые должны заполнять контейнер без повторения, нам нужно использовать 'frame' в теге vml: fill. Таким образом, вы можете использовать в этом теге двукратные изображения. Просто убедитесь, что вы установили ширину вашего контейнера, используя встроенный стиль в теге v: rect (в приведенном выше примере он установлен на 600 пикселей).

Если вы хотите заполнить свой контейнер заполнением, вы можете обнаружить, что размещение VML внутри контейнера приведет к разрушению заполнения. Мы исправляем это, оборачивая VML вокруг нашего контейнера, поэтому нам нужно вложить наш контейнер в другую таблицу следующим образом:

Повторение фонового изображения

Вы также можете добавить фон, который повторяется внутри контейнера, в который вы его поместили. Отличный пример - повторить шаблон во всем теле письма.

Если изображение, которое мы помещаем в ячейку контейнера, меньше размера контейнера, оно будет автоматически повторяться как по горизонтали, так и по вертикали. Чтобы повторить только в одном направлении, используйте CSS «background-repeat» и добавьте значение repeat-x, чтобы повторять по горизонтали, или repeat-y, чтобы повторять по вертикали.

Чтобы заполнить весь контейнер полностью повторяющимся узором, код очень прост:

Как заставить это работать в Outlook с резервным вариантом VML

Опять же, если вы хотите видеть фоновую визуализацию в клиентах Outlook, вы можете применить VML. На этот раз код немного отличается, VML помещен перед контейнером:

Чтобы фон повторялся, заполните тег v: fill типом tile. Неудивительно, что в Windows 10 Mail есть некоторые проблемы с рендерингом, а с повторяющимся фоном проблемы рендеринга могут быть гораздо более неприглядными. Таким образом, отказ от VML может быть самым безопасным подходом, если у вас есть подписчики на Windows 10 Mail.

Продвинутые техники

Фиксированные и повторяющиеся фоновые изображения дают много возможностей улучшить дизайн электронной почты, но есть еще кое-что:

Замена контрастного изображения

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

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

Стоит добавить темный резервный цвет. Это поможет с почтовыми клиентами, которые не будут загружать изображения без действий читателя, и гарантирует, что ваше сообщение будет прочитано, когда ваше изображение не было загружено.

Теперь в вашем HTML примените свой класс к ячейке, содержащей фоновое изображение в светлом режиме. Простой!

Обратите внимание : то, для чего сложно спроектировать и еще сложнее создать код, - это почтовые клиенты, которые инвертируют цвета вашей электронной почты в среде темного режима, полностью игнорируя всю тяжелую работу, которую вы вкладываете в написание медиа-запросов в темном режиме.

Подключить эти почтовые клиенты практически невозможно. Однако вы можете поиграть с фоновыми изображениями, которые имеют уровень прозрачности, и применить к контейнеру высококонтрастный цвет фона, например белый для светлого режима и черный для темного режима. Это позволит инвертировать цвет фона. Я попробовал это на следующем примере:

Фоновое изображение моего шеврона имеет непрозрачность 30% на стрелках и полностью прозрачно между ними. Это означает, что когда оскорбляющие почтовые клиенты берут под свой контроль мой рендеринг в темном режиме, содержимое становится читаемым.

Для получения дополнительной информации о кодировании для темного режима и поддержке почтового клиента ознакомьтесь с нашим полным руководством по электронной почте темного режима.

Интерактивный фон

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

Для этого вам понадобится немного встроенного CSS. Поместите это в свой тег <style>:

Теперь все, что вам нужно сделать, это применить этот класс к ячейке таблицы, например:

Повышайте уровень своего дизайна

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

Нам бы очень хотелось увидеть, как вы используете фоновые изображения в своих электронных письмах - поделитесь своими примерами в комментариях ниже.

Убедитесь, что ваши фоновые изображения работают - с Litmus Это сработало? Предварительно просматривайте фоновые изображения (и остальную часть электронной почты) в более чем 100 почтовых клиентах, приложениях и устройствах с помощью Litmus. И поздоровайтесь с фирменными безошибочными электронными письмами. Начать бесплатную пробную версию →

Первоначально опубликовано 24 мая 2019 г. Джейсоном Родригесом. Последнее обновление 21 июля 2021 г.