Как добавить фоновое HTML-изображение в письмо (с примерами кода)

Письма — это не только их контент и то, что они несут получателю. Это еще и дизайн, и эмоции, которые он вызывает у аудитории. Фоновые изображения в письмах — один из самых распространенных способов быстро и легко создать уникальный стиль рассылки. Данная статья посвящена именно им. Мы покажем, как создать фоновое HTML-изображение для шаблона письма, включая весь необходимый код. Кроме того, мы расскажем, как можно упростить процесс разработки и добавить фоновые картинки без верстания в Stripo.

Что такое фоновое изображение?

Прежде всего, давайте разберемся, что такое фоновое изображение. По сути, эти картинки накладываются на основной контент письма и служат своего рода «подносом», на котором можно разместить остальную часть содержимого письма (тексты, другие изображения, баннеры, карусели и т. п.). Звучит довольно просто, и на самом деле так и есть.

Зачем это нужно?

Поскольку фоновое изображение кажется простым и, в некоторой степени, «старомодным» способом оформления писем, зачем же его использовать?

У нас есть три отличительных преимущества, благодаря которым стоит использовать фоновые изображения при создании рассылки:

• главное преимущество фонового изображения заключается в том, что на нем можно расположить дополнительный HTML-контент, в то время как в других сценариях это место будет занято другим контентом (например, у вас есть выбор между фоновым изображением и текстом или только готовым изображением с уже нанесенным на него текстом);
• текст на фоновом изображении (в отличие от обычного изображения с уже нанесенным текстом) можно прочитать даже при отключенном отображении картинок (некоторые получатели могут отключить отображение картинок из-за ограниченного или слабого интернет-соединения);
• использование фоновых изображений дает больше возможностей для создания уникальных писем и привлечения внимания к бренду за счет комбинирования фонов и различных элементов контента на них.

Как видите, у вас есть довольно солидный набор преимуществ, которые могут сделать процесс email-дизайна более разнообразным с точки зрения оформления письма.

Что нужно знать перед добавлением фонового изображения в HTML-письмо

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

Коэффициент контрастности

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

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

При создании фонового изображения и контента поверх него стоит следовать Web Content Accessibility Guidelines (WCAG) — международным техническим стандартам, которые делают сайты и цифровой контент доступными для людей с ограниченными возможностями. Если вы адаптируете фоновое изображение и контент к этим рекомендациям, ваши письма смогут читать все пользователи.

Для упрощения процесса дизайна все используемые цветовые комбинации можно проверить здесь.

Общий вид и простота

Цвета и их сочетаемость важны, но не забывайте об общем дизайне и о том, как фон работает в паре с контентом. Всегда помните об общей насыщенности фона. Если на нем слишком много деталей, то, независимо от того, насколько удачно подобраны цвета, текст будет чрезвычайно трудно читать. В данном случае принцип «чем больше, тем лучше» не работает.

Фолбэк-версия

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

Как сверстать фоновое изображение HTML-письма

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

Мы будем использовать пример кода, который вы позже сможете вставить в свое письмо.

Базовая HTML-структура

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

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
</body>
</html>
 

Он состоит из двух основных частей, которые являются основой нашего изображения, с фоновой картинкой. Первая часть — это <style></style>, которая будет содержать код для стилей писем, а также нашу фоновую картинку. Вторая часть — это <body></body>, где необходимо разместить наш контент, который будет находиться над фоновой картинкой письма.

Добавление табличной структуры для совместимости

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

Скопируйте этот код и вставьте его в часть <body></body>.

<table role="presentation" width="100%" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <table role="presentation" width="600" cellspacing="0" cellpadding="0" align="center">
                <!-- Email content will go here -->
            </table>
        </td>
    </tr>
</table>
 

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

• внешняя таблица с шириной width="100%" обеспечивает адаптацию разметки к различным размерам экрана;
• внутренняя таблица с шириной width="600" содержит собственно контент письма и выровнена по центру, что создает аккуратный профессиональный вид, который хорошо смотрится на разных устройствах и в разных почтовых клиентах.

Создание фундамента для фонового изображения

После того, как мы разобрались со структурой таблицы, необходимо создать «обертку» для будущего фонового изображения. По сути мы создадим div внутри внутренней таблицы, который будет содержать фоновое изображение. Это важная часть, так как мы создаем специальный контейнер для фонового изображения и четко разделяем контент и фоновое изображение.

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

Возьмите этот код:

<td class="email-body">
    <div class="content">
        <h1>Background Image and Text</h1>
        <p>You can place your own background and content here.</p>
    </div>
</td>
 

И вставьте его сюда:

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

Добавление CSS-кода фонового изображения

Теперь перейдем к основной части, а именно к тому, как сделать так, чтобы фоновое изображение отображалось должным образом. Внутри тега <style> в <head> мы добавим CSS для класса .email-body, чтобы настроить фоновое изображение и обеспечить его правильное отображение в разных почтовых клиентах.

Чтобы оживить фоновое изображение, замените <style></style> этим кодом:

<style>
    body {
        margin: 0;
        padding: 0;
    }
    .email-body {
        background-image: url('https://img.freepik.com/premium-photo/multi-color-paper-texture-background_8493-4031.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100%;
        display: block;
    }
    .content {
        padding: 20px;
        color: white;  /* Change text color to ensure readability */
        font-family: Arial, sans-serif;
    }
</style>
 

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

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

• margin: 0 удаляет все стандартные внешние отступы вокруг текста документа. По умолчанию браузеры часто применяют небольшие отступы по краям страницы. Значение 0 гарантирует, что по краям письма не будет нежелательных пробелов;
• padding: 0 очень похоже на предыдущее, но удаляет любой стандартный внутренний отступ. Внутренний отступ — это пространство между контентом и границей элемента. Если задать его значение равным 0, контент будет начинаться с самого края тела без дополнительного пространства;
• background-image является ключевым элементом и определяет фоновое изображение для элемента;
• background-repeat: no-repeat предотвращает повторение изображения, гарантируя, что оно отображается только один раз, даже если не заполняет всю область;
• background-size: cover контролирует масштабирование фонового изображения, а cover гарантирует, что изображение покрывает всю область элемента, даже если это означает его обрезку (проще говоря, сохраняет соотношение сторон при заполнении области, предотвращая появление пробелов);
• background-position: center необходимо для центрирования фонового изображения внутри элемента;
• width: 100% устанавливает ширину элемента .email-body и делает так, чтобы фоновое изображение занимало всю ширину письма;
• height: 100% устанавливает высоту элемента .email-body равной 100% его родительского контейнера, благодаря чему элемент заполняет доступное вертикальное пространство;
• padding: 20px создает пространство 20 пикселей со всех сторон между контентом и краями контейнера .content;
• color: white меняет цвет текста внутри элемента .content на белый. Это особенно важно, когда фоновое изображение может быть темным, чтобы текст был читаемым и четко выделялся;
• font-family: Arial, sans-serif устанавливает семейство шрифтов для текста на Arial.

Добавление фолбэка

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

Скопируйте этот код и вставьте его между тегами </style> и </head>:

<!--[if mso]>
    <style>
        .email-body {
            background: #f0f0f0; /* Fallback color for Outlook */
        }
    </style>
    <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true">
        <v:fill src="https://img.freepik.com/premium-photo/multi-color-paper-texture-background_8493-4031.jpg" />
    </v:background>
<![endif]-->
 

Код фолбэка здесь относительно прост, но давайте кратко опишем, что он делает:

• background: #f0f0f0 — это резервный однотонный цвет фолбэка;
• <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true"> — это VML (Vector Markup Language), используемый Outlook для рендеринга фоновых изображений;
• <v:fill src="https://img.freepik.com/premium-photo/multi-color-paper-texture-background_8493-4031.jpg" /> определяет фоновое изображение, которое будет использоваться в Outlook, поэтому, если вам необходимо его изменить, просто замените ссылку на собственное изображение;
• <!--[if mso]> ... <![endif]--> — это специальный блок для Outlook, который обеспечивает отображение фонового изображения с помощью VML, в то время как другие письма игнорируют эту часть.

Весь код

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

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .email-body {
            background-image: url('https://img.freepik.com/premium-photo/multi-color-paper-texture-background_8493-4031.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            width: 100%;
            height: 100%;
            display: block;
        }
        .content {
            padding: 20px;
            color: white;  /* Change text color to ensure readability */
            font-family: Arial, sans-serif;
        }
    </style>
    <!-- Outlook background image fallback -->
    <!--[if mso]>
        <style>
            .email-body {
                background: #f0f0f0; /* Fallback color for Outlook */
            }
        </style>
        <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true">
            <v:fill src="https://img.freepik.com/premium-photo/multi-color-paper-texture-background_8493-4031.jpg" type="tile" />
        </v:background>
    <![endif]-->
</head>
<body>
    <table role="presentation" width="100%" cellspacing="0" cellpadding="0">
        <tr>
            <td>
                <table role="presentation" width="600" cellspacing="0" cellpadding="0" align="center">
                    <tr>
                        <td class="email-body">
                            <div class="content">
                                <h1>Background Image and Text</h1>
                                <p>You can place your own background and content here.</p>
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>
 

Как добавить фоновое изображение в письмо в Stripo

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

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

Откройте настройки стилей

Кликните на структуру, в которую нужно поместить фоновое изображение, а затем перейдите на вкладку «Стили».

Активируйте опцию фонового изображения

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

Выберите способ добавления фонового изображения

После клика на переключатель «Фоновое изображение» откроется окно с несколькими вариантами добавления изображения. Давайте кратко рассмотрим каждый из них:

• можно добавить изображение со своего устройства, кликнув на поле добавления основного изображения или вставив туда URL-адрес этого изображения;
• вкладки «Письмо» и «Проект» показывают изображения из ваших галерей, связанных с письмом или всем проектом (в нашем примере у нас есть пустое письмо и пустой проект, поэтому мы не видим здесь никаких вариантов изображений);
• вкладки «Сезонные» и «Декоративные» содержат элементы, созданные нашей командой дизайнеров, которые вы можете выбрать (поиск по различным категориям) и установить в качестве фонового изображения;
• вкладка «AI-изображение» открывает отдельное окно, в котором можно генерировать собственную картинку с помощью искусственного интеллекта (об этом расскажем позже);
• вкладки «Фотосток», «Иконки» и «Гифки» позволяют выбирать из широкого спектра бесплатных изображений, иконок и GIF-файлов из разных источников, не выходя из редактора.

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

Настройте фоновое изображение письма

Итак, мы добавили фоновое изображение в структуру, и на данный момент она выглядит так:

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

• опция «Повторять изображение» позволяет включить повторение фона;
• опции «Горизонтальное расположение» и «Вертикальное расположение» позволяют установить точное положение фонового изображения внутри элемента;
• опции «Ширина фона» и «Высота фона» позволяют установить точный размер фонового изображения или использовать предустановленные настройки, такие как «auto», «cover» или «contain»;
• опция «Граница» позволяет создать границу вокруг фонового изображения и установить, будет ли она сплошной или только по бокам.
• опция «Радиус» позволяет установить радиус фонового изображения, выбрав радиус для всех углов сразу или для каждого угла отдельно.

Добавьте контент

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

После этого добавим тот же текст из примера кода.

После этого установим стиль абзаца для первого текстового блока на H1:

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

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

Генерирование фоновых изображений с помощью GenAI

Мы обещали рассказать вам больше о нашем AI-изображении, так что давайте начнем. Вы можете сгенерировать любую фоновую картинку для секции, используя возможности GenAI и не выходя из редактора.

Вернитесь на несколько шагов назад в гайде и кликните на вкладку «AI-изображение» при добавлении изображения на фон.

Создавать изображения с помощью GenAI очень просто. Нужно всего лишь:

• написать запрос, чтобы правильно сориентировать GenAI;
• выбрать модель AI (каждая из них генерирует изображения по-разному с точки зрения стиля, качества и скорости);
• установить предпочтительный стиль изображения;
• установить соотношение сторон;
• кликнуть на кнопку «Генерировать».

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

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

В завершение

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