Як додати фонове 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 чи інші параметри і згенерувати зображення заново.

Після додавання зображення можна застосувати до нього ті самі налаштування стилю, які ми обговорювали раніше.

На завершення

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