Как поставить фон в html css

Как размыть фоновую картинку?

За размытие содержимого элемента, включая картинки, отвечает функция blur(), которая применяется к свойству filter. Эта функция размывает всё на своём пути, поэтому сперва надо изолировать фоновое изображение и уже затем использовать filter . Для этого создадим псевдоэлемент через ::before и к нему добавим фон через background и размытие через filter . При этом псевдоэлемент требуется зафиксировать чтобы он не прокручивался вместе с текстом. Для этого воспользуемся свойством position со значением fixed и здесь же зададим размеры псевдоэлемента через свойства top , left , bottom , right с нулевыми значениями.

Содержимое ::before оказывается выше текста и скрывает его, так что опускаем фон ниже свойством z-index со значением -1. В итоге получится код, показанный в примере 1.

Пример 1. Размытие фона веб-страницы

Результат данного примера показан на рис. 1.

Рис. 1. Размытый фон у веб-страницы

Пример 2. Размытие фона раздела

Результат данного примера показан на рис. 2.

Рис. 2. Размытый фон у блока

См. также

• backdrop-filter
• background
• blur()
• brightness()
• contrast()
• drop-shadow()
• filter
• grayscale()
• hue-rotate()
• invert()
• opacity()
• position
• position в CSS
• relative и absolute
• saturate()
• sepia()
• Абсолютное позиционирование
• Добавление тени
• Использование в вёрстке
• Линейный градиент
• Липкое позиционирование
• Не только текст
• Несколько фоновых картинок
• Нормальное позиционирование
• Относительное позиционирование
• Подробнее о позиционировании
• Поток
• Псевдоэлемент ::before
• Псевдоэлементы
• Псевдоэлементы ::after и ::before
• Свойства позиционирования
• Спойлер
• Спрайты
• Установка фона и градиента
• Фиксированное позиционирование
• Фильтр
• Фоновая картинка

Как добавить или изменить фон в HTML-письмах

Рассказываем обо всех способах работы с фоном при создании рассылки.

Письма на стандартном #ffffff — лаконично, удобно, читаемо, да и видно во всех почтовиках. Но что, если нужно пободрее или вообще поставить картинку фоном на всё письмо?

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

Как «раскрасить» фон с помощью HTML

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

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

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

Если письмо хочется сделать выделяющимся, но при этом быть уверенным, что фон письма не помешает чтению — используйте один цвет.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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