Обложка — первое, что человек видит на странице. Сообщает о чем материал и побуждает его прочесть или сообщает уникальную ценность продукта, емко объясняет, почему он интересен. Чаще всего обложка содержит фоновое изображение — это может быть стильная фотография, атмосферное видео, просто цвет, иллюстрация или градиент, текстура.

Существует несколько вещей, которые нужно знать, чтобы правильно работать с обложками и фоновыми изображениями и видео.
Видимая область браузера
В интернете, в отличие от печатной продукции нет фиксированного размера видимой области браузера. У всех разные экраны и разные пропорции. Причем даже в разных браузерах видимая область тоже разная. Например могут быть видны вкладки или закладки и тд. Изображение в обложке кадрируется таким образом, чтобы всегда показаться на экране пользователя без полей.
Пропорции изображения
Рассмотрим несколько вариантов пропорций изображения
до загрузки в обложку и после.
Вертикальное изображение
Квадратное изображение
Узкое горизонтальное изображение
Горизонтальное изображение с соотношением сторон 16:9
Оптимальный размер изображения:
Лучше всего фотографии подготавливать со следующими параметрами:
Формат: jpg
Размер по ширине: 1680 px
Кол-во точек на дюйм: 72 dpi
Цветовая модель: RGB
Степень сжатия: 10
Изменение высоты обложки
Узкая обложка — это обложка по высоте не 100%, а около 60 или 70%. В этом случае у обложки скорее утилитарная, чем имиджевая функция, ведь акцент смещается на информацию, которая следует за ней.

Для создания подобных обложек в настройках блока есть параметр «высота». Задавать высоту можно либо в пикселах (например, 400px), либо в «видимых точках», иначе говоря, в процентах (1 vh равен 1% области просмотра экрана). Задавать высоту в vh предпочтительнее.
Цвет
Тонирование фонового изображения
Тонирование изображение нужно для того, чтобы хорошо читался текст на обложке.
Для этого в «обложках» предусмотрена настройка цвета фильтра. В приведенном примере выбран одинаковый цвет фильтра в начале и конце обложки.
Иногда для тонирования используют фирменный цвет или основной цвет сайта.
Переход в цвет следующего за обложкой блока
Иногда бывает нужно, чтобы обложка плавно переходила в следующий блок. Для этого нужно цвету фильтра в конце поставить 100% прозрачности тона. А сам цвет сделать таким же, как и в следующем за обложкой блоке.
Также можно увеличить высоту обложки в два раза и добиться сочетанием двух этих настроек, эффекта представленного ниже —
Градиент и заливка цветом
В настройках тонирования существуют параметры - прозрачность и цвет. Проставьте в 100% в значении прозрачность и выберите цвет — это будет цвет заливки вашей обложки.
Если выбрать разные цвета, то у нас на обложке будет плавный переход из одного цвета в другой.
Видео в обложке
Вместо статичного фонового изображения обложки можно поставить видеоролик. Два  способа это сделать.
Ссылка на ролик YouTube
Загружаете или находите ролик на YouTube. Заходите во вкладку контент и вставляете в нужное поле ссылку на ваш ролик. Получается обложка с видео.
Our Company
Experts in the art
Art Basel stages art shows for high quality modern and contemporary art and is sited annually in Basel, Miami Beach and Hong Kong
Ссылка на ролики в форматах webm и mpeg4
С помощью онлайн конвертеров вы можете создать видео в формате webm и mpeg4 и разместить его либо у себя на хостинге, либо на хостинге конвертера.
Например, это можно сделать у gfycat.com
Заходите во вкладку настройки обложки и вставляете в нужные поля ссылку на ваш ролик в обоих форматах.
Почему в обоих форматах?
Дело в том, что разные браузеры поддерживают разные форматы и универсального не существует. Поэтому, когда пользователь будет заходить на сайт, ему будет показываться видео в подходящем для его браузера формате. Иначе обложка будет пустой.
Обложка в мобильной версии
На разных разрешениях экрана обложка будет отображаться по-разному. И если на самых популярных разрешениях внешний вид будет меняться не критично, то на мобильных устройствах обложка может выглядеть совсем не так, как вы ожидаете. Посмотрите, пожалуйста, подробную инструкцию, как создать мобильную версии обложки (и любого другого блока).
Видео в обложке — не работает в мобильной версии

Следует помнить, что из-за особенностей операционных систем в мобильных браузерах, фоновое видео не будет воспроизводиться — это связано со стоящими в системах запретами на автоплейное видео. Если на вашем сайте есть фоновое видео в обложке, не забудьте загрузить картинку (вкладка Контент). Она будет отображаться, если видео воспроизвести невозможно, то есть при просмотре на телефонах или планшетах.
Made on
Tilda