Блог 15.04.2024

Как сделать фон в HTML-письмах — актуальные способы изменения фоновых изображений

2 098

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

Вот несколько методов установки.

background-color. Позволяет установить цвет для элемента <body> или другого контейнера в письме.

background-image. Можно использовать фоновое изображение. Однако следует учитывать, что не все почтовые клиенты поддерживают эту функцию, и изображение может быть заблокировано некоторыми системами безопасности.

base64. Чтобы быть уверенным, что изображение будет отображаться во всех почтовых клиентах, его можно встроить непосредственно в HTML с помощью этого кода.

background-repeat. Если нужно повторить фоновый рисунок, используйте данный параметр.

background-attachment. Подходит для создания эффекта фиксированного фона (при прокрутке содержимого страницы он остается неподвижным).

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

Можно ли использовать только HTML

Да, можно использовать только HTML, но в этом случае вам придётся ограничиться базовыми возможностями HTML без использования CSS.

Свойство background. HTML 5 включает атрибут background для элемента <body>, который позволяет задавать цвет, изображение фона или оба сразу.

Атрибут bgcolor. Задаёт цвет элемента <body>.

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

Как сделать фон в HTML

Цвета в письмах прописывают в виде шестнадцатеричных чисел формата HEX (#444444). Важно помнить, что сокращения HEX обрабатывают не все почтовики, поэтому их в вёрстке рассылок использовать не стоит. Цвета формата RGB тоже работать не будут.

При вёрстке фон задают через атрибуты background=»» и bgcolor=»» для тега <table>.

Не все почтовые клиенты обработают фон страницы, который прописан через стили CSS. Поэтому свойство background и его производные (background-image, background-visibility, background-size) лучше не применять.

<html>

<head>

<title>Цвет текста и фона</title>

<style>

.colortext {

background-color: #ffe; /* Цвет фона */

color: #930; /* Цвет текста */

}

</style>

</head>

<body>

</form>

</body>

</html>

Используем один цвет

Как сделать фон в html выделяющимся и быть уверенным, что

он не помешает чтению? Используйте один цвет. Мы рекомендуем сочетать изображения и прописанный код.

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

Чтобы ваше письмо выглядело органично должны совпадать три элемента:

цвет фона фотографий;
цвет HTML-блока с текстом;
цвет фона alt, если изображения не отображаются.

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

Несколько цветов

Цвет может использоваться не только для красоты, но и для упорядочивания блоков письма. Градиент или цветовые разделители отлично подходят для создания «иерархичности» контента и здорово управляют вниманием читателя.

Если хочется сделать блоки письма разного цвета, логично прописать их через атрибуты background=»» и bgcolor=»» в <table> для каждого.

Совсем простой способ

Если только что вы запутались в кодах, рекомендуем обращаться к конструкторам писем — таким как Letteros.

Здесь перекрасить блоки можно в один клик. А вторым кликом — отформатировать блок в изображение, если это необходимо.

Изображения в качестве фона для письма

Некоторые конструкторы позволяют сделать изображения фоном блоков письма. Так можно и в Letteros.

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

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

Подбирая картинку на фон, важно помнить о стыках. Это как с обоями в комнате: паттерн должен хорошо смотреться, если отойти подальше и смотреть на всю комнату.
На этой платформе от Campaign Monitor вы можете подобрать «пуленепробиваемый» фон для вашей рассылки и быть уверенным, что он будет выглядеть отлично на всех ОС. Здесь же прописаны HEX-цвета для кода и сам кусочек кода, который вставляется в <body>.

Правила работы с фоном‑картинкой

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

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

Текстура

Чтобы сделать фон страницы в HTML текстурным, можно использовать фоновое изображение с текстурой.

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

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

После того, как вы выбрали текстурное изображение, вставьте его в качестве фонового изображения для элемента <body> вашего HTML-документа.

В CSS вы можете также уточнить параметры фонового изображения: повторение, положение, размер и другие. Можно использовать `background-repeat: repeat-x;` для повторения текстуры только по горизонтали или `background-size` для изменения размера.
Важно протестировать отображение текстуры в различных браузерах и на разных устройствах, чтобы убедиться, что она отображается корректно и выглядит эстетично.

Полупрозрачный фон

В CSS можно использовать свойство background-color с указанием значения RGBA (красный, зелёный, синий и альфа‑канал). Альфа‑канал определяет прозрачность цвета, где 0 означает полную прозрачность, а 1 — полную непрозрачность.

Вот пример, как это можно сделать:

.transparent-bg {

background-color: rgba(255, 255, 255, 0.5); /* Белый цвет с прозрачностью 0.5 */

}

В этом примере rgba(255, 255, 255, 0.5) указывает белый цвет с прозрачностью 50%. Вы можете изменить значения красного, зелёного и синего каналов (первые три числа) в соответствии с вашими предпочтениями, а также изменить значение альфа‑канала (последнее число) для управления уровнем прозрачности.

Вы также можете использовать шестнадцатеричное значение альфа‑канала, где 00 означает полную прозрачность, а FF — полную непрозрачность.