Как добавить задний фон в html: Как добавить фоновый рисунок на веб-страницу?

Содержание

Как добавить фоновое изображение в HTML-емейл — Stripo.email

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

Просто выбирая фото и добавляя фоновые изображения в HTML-емейл, вы задаете тон всего сообщения.

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

Посмотрите наше короткое видео с основной информацией о типах фона и о том, как добавить их в Stripo.

В интернете масса информации о кнопках призыва к действию, баннерах и шрифтах.

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

Я искала в сети хоть какие-то подробности о фоновых изображениях для HTML-емейлов, но все, что я нашла, — как добавить фон в исходящий емейл в Gmail или Outlook и как вносить изменения в коды HTML.

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

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

и больше не нужно вносить никаких изменений в HTML-код.

Что нужно знать, прежде чем добавлять фоновое изображение в ваш HTML-емейл

Проверьте отображение ваших емейлов

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

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

В этом примере мы видим, что фон в виде белой рамки не отображается в Outlook 2003, равно как в Outlook 2016 и Windows 10 Mail, но отображается в версии 2007 года.

Что делать, если изображение не отображается:

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

Примечание: фоновый цвет емейла по умолчанию белый.

Разновидности фоновых изображений

Фоновые изображения для полос

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

Мне нравится этот пример за простое, но изысканное изображение.

Просто посмотрите, как легко добавить фоновое изображение в емейл с помощью Stripo:

мы вставили блоки: дополнительное изображение, текст, можно также добавить “кнопку” или таймер обратного отсчета поверх фона;

выбрали цвет фона для всей полосы;
применили “фоновое изображение” для блока.

Примечание: отцентрируйте его с помощью кнопки “Центрирование”, используйте опцию “Повторить”, если ширина или высота изображения слишком малы, чтобы заполнить всю полосу.

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

Это важно: добавленное изображение можно отредактировать в нашем встроенном фоторедакторе.

Добавьте разделители… Почему мы здесь говорим о разделителях? Потому что если мы хотим, чтобы дизайн емейла выглядел более упорядоченным, мы можем использовать их для разделения частей блоков и даже полос. Это особо уместно, если фоновые изображения имеют одинаковый цвет.

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

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

Как это сделать в Stripo:

загрузите изображение, которое вы выбрали, либо используйте любую картинку из нашего встроенного банка изображений;
включите все опции.

Цвет фона в качестве альтернативы фоновому изображению

Хорошая новость: установить соответствующий цвет в качестве фона намного проще. И он почти всегда корректно отображается в любых емейл-клиентах и на всех устройствах. Но будьте осторожны с Microsoft Outlook. Вам все равно нужно проверить отображение с помощью Litmus.

Здесь вы можете использовать все богатство воображения.

Например, компания Outline всегда помещает новости на цветной фон. Кроме того, применяются контрастные цвета шрифта, но не черный текст.

Применять ли разные цвета для отдельных блоков или всего емейла? Решать вам.

Корпорация Samsung помещает большую часть своих емейлов на черный фон и применяет контрастную кнопку CTA. Выглядит очень классно.

Фоновое изображение для всего емейла

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

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

Именно так клиенты видят ваш емейл с фоновым изображением на рабочем столе и на мобильных экранах.

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

Вы можете размещать поверх них баннеры, образцы вашей продукции, контактную информацию, рамки, футеры, хедеры и т. д.

Как установить фоновое изображение в шаблоне емейла с помощью редактора Stripo.email:

на панели инструментов выберите “Внешний вид”;
нажмите “Общие”;
включите опцию “Фоновое изображение”;
загрузите понравившееся изображение;
включите “Повтор” и “Центрировать”.

Примечание: поскольку некоторые емейл-клиенты не отображают фоновое изображение, вы можете установить цвет фона по умолчанию.

Правила, которые следует соблюдать

При добавлении фоновых изображений в емейл-рассылку важно соблюдать простые правила:

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

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

Раньше нам нужно было разбираться в HTML-коде, чтобы добавить фоновое изображение в шаблон емейла. Сейчас в редакторе Stripo.email нам вообще не нужно вносить никаких изменений в код. Нам даже не нужно знать, что это вообще такое. ?

Система упростила весь процесс и облегчила нашу работу.

Краткие итоги

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

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

Желаю вам всего наилучшего и успешных рассылок!

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

Задать фоновый цвет и/или картинку для страницы или отдельного её элемента достаточно просто. Главное знать, где и как это можно сделать, а также иметь код цвета и/или фоновую картинку. Не исключено, что из этой статьи Вы узнаете много нового, но создавал я её специально для новичков. Поэтому всё будет максимально коротко и подробно одновременно. Главное, что Вы получите не только общее представление и готовые примеры, но и понимание того, как сделать фон в HTML.

Чтобы задать фон в HTML используйте промежуточный DOCTYPE

А начну я с того, что в HTML5 нет возможности задать фон для сайта. Эту возможность было решено вынести в CSS. Поэтому, если Вы планируете использовать ниже изложенное, и хотите получить валидный (правильный) код, Вам нужно остановиться на переходном типе документа. Для этого ваша веб-страница должна начинаться со следующей строки:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

Как создаётся фон на веб-странице?

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

Фон HTML-документа и его элементов

Второе, что Вам нужно знать – это различие между телом документа и элементом документа. Тело документа обозначается в HTML-коде веб-страницы тегом BODY, который включает в себя всё содержание веб-страницы. Очевидно, что фон тела документа не может быть прозрачным. Если фон тела документа не задан, используется значение по умолчанию, заданное в настройках браузера.

Элементы страницы находятся внутри тега BODY. Примечательно, что задать цвет и/или фоновую картинку средствами HTML можно далеко не для всех элементов документа. Например, фоновую картинку можно указать только для таблиц. По умолчанию, они обычно имеют прозрачный фон.

Атрибут bgcolor для создания фонового цвета

Для того чтобы задать фоновый цвет документа или его элементов используется атрибут bgcolor, например:

В данном случае мы задаём фоновый цвет для страницы в целом. А вот пример того, как задать фоновый цвет для таблицы, в теге TABLE:

<table bgcolor=»#ec008c»>
<tr>
<td>Текст с фоном</td>
</tr>
</table>

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

Как узнать код цвета?

Вы, наверное, уже заметили, что цвет в HTML задаётся специальным кодом, например: #ec008c. Для того чтобы узнать код нужного Вам цвета Вы можете использовать один из графических редакторов. Например, в Photoshop можно использовать «Eyedropper Tool» (Пипетка) для получения цвета из точки на картинке. Затем, нужно кликнуть полученный цвет на панели инструментов и в открывшемся окне «Color Picker» (Выбор цвета) скопировать код цвета.

Обращаю Ваше внимание на то, что этот код будет без знака решетки (#) в начале, это знак нужно будет добавить вручную.

Также Вы можете использовать многочисленные онлайн сервисы, например:

Их принцип работы ещё проще – кликаете нужный цвет и получаете его код.

Атрибут background для создания фоновой картинки

Также как в случае с фоновым цветом, так и в случае с фоновой картинкой, Вам нужно использовать специальный атрибут, а именно background, например:

В данном случае мы задаём фоновую картинку для страницы в целом. Примечательно, что из-за ограничения размеров картинки, она будет повторяться, например:

Как вы видите, при повторении, заметен переход между картинками. Поэтому зачастую используются специальные картинки, где этот момент учтён.

А вот пример того, как задать фоновую картинку для таблицы, в теге TABLE:

<table background=»/2014/06/bg.jpg»>
<tr>
<td>Текст с фоном</td>
</tr>
</table>

Примечательно, что фоновую картинку можно задать только для таблицы в целом и/или её отдельной ячейки. Для строки это не получится.

Абсолютный и относительный путь к фоновой картинке

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

В таком случае у Вас не возникнет сопутствующих проблем. Подробней об это Вы можете почитать тут.

Подведём итоги

Использование атрибутов bgcolor и background морально устарело, потому для валидности HTML-кода Вам придётся использовать переходной DOCTYPE. Для задания фонового цвета в HTML использует специальные коды, которые Вы можете узнать в графическом редакторе или используя специальные онлайн сервисы. Фоновая картинка дублируется в приделах отведённой ей области и ложится поверх фонового цвета. Для указания фоновой картинки лучше использовать полный её URL-адрес. На этом у меня всё. Спасибо за внимание. Удачи!

Короткая ссылка: http://goo.gl/03TsNz

Background-blend-mode • Про CSS

На этой неделе в Firefox 30 было включено по умолчанию свойство background-blend-mode. Таким образом, Firefox стал третьим браузером, поддерживающим это свойство (два других — Opera и Chrome). Safari будет поддерживать это свойство в следующей версии, про планы IE мне ничего найти не удалось.

Внимание: все демо в посте — действующие примеры без фолбеков. Для просмотра лучше всего воспользоваться последними версиями Chrome, Opera или Firefox.

Что делает это новое свойство и какие возможности оно нам дает?

background-blend-mode управляет режимами наложения слоев фона, заданного в CSS.

Пример:

Наведите курсор на картинку, чтобы увидеть исходное изображение.

background-blend-mode аналогичен режимам наложения слоев в фотошопе, и список возможных значений свойства вам, скорее всего, покажется знакомым:

normal
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity

Как это работает?

Возьмем, к примеру, картинку с котиком и зададим её фоном:

background: teal url(http://placekitten.com/250/200);

Для наложения слоев обязательное условие, чтобы слоев было больше одного. В нашем случае первым слоем является цвет (teal).

Теперь можно добавить режим наложения, например:

background: teal url(http://placekitten.com/250/200);
background-blend-mode: hard-light;

Результат:

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

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

background: teal url(http://placekitten.com/250/200);
background-blend-mode: hard-light, multiply, normal;

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

Как можно использовать background-blend-mode?

Предположим, есть сайт в определенной цветовой гамме, и в дизайне нужно разместить несколько картинок:

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

background-blend-mode: luminosity;

Результат:

Способ имеет свои преимущества:

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

А если потом изменится цветовая схема сайта — не нужно будет заново перекрашивать картинки под новую схему — всё произойдет само собой:

Правда, мне не удалось сделать плавную смену режимов наложения. Насколько я понимаю, они не анимируются. Но это можно обойти используя псевдоэлементы: через :before создается дублирующий слой с той же картинкой, и ему по наведению меняется прозрачность — это можно сделать плавно (пример справа):

Ещё один способ покрасить картинку в дизайне — подложить полосатый градиент:

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

Интересно, что в некоторых режимах результат различается в зависимости от того, наложена ли картинка на цвет или цвет поверх картинки (слева картинка поверх цвета, справа наоборот):

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

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

Уже есть первая галерея с примерами: bennettfeely.com/gradients/. Ниже на странице можно найти JS-фолбек и взвешивание одних и тех же градиентов, сделанных на CSS или в виде изображений различных форматов. CSS, конечно, выигрывает.

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

Вдохновившись примерами из галереи, я решила посмотреть что ещё можно сделать. Одно из забавных открытий — шахматная доска:

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

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

Ещё несколько градиентов:

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

background-blend-mode выглядит очень привлекательно, позволяя добавить немного магии фотошопа в привычный CSS.

Как сделать видео фоном сайта

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

Давайте посмотрим примеры подобных сайтов. Большинство из них, неоправданно долго грузятся — и это главный минус видеофона. Но это не всегда так. Все зависит от того, как оптимизировано видео, какой оно продолжительности и так далее. Можно и css код раздуть до безобразных размеров, а можно грамотно оптимизировать и сократить вес в 2-3 раза. (Кстати, об оптимизации css кода можно почитать в этой статье)

Итак пример:

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

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

Как сделать видео фоном сайта?

Разбираясь в вопросе ,как добиться эффекта с видеофоном, в свое время, я обнаружил несколько способов. Одни из них проще, другие сложнее, некоторые требуют javascript, а другие нет. Сегодня я расскажу вам о том, как добиться подобного эффекта без всяких там скриптов. Приступим…

Сразу прошу извинить за качество видео. Оно 720p, так что большие мониторы — вам привет! Прошу камнями не кидать, это только в качестве примера, а вы все равно будете подбирать под те разрешения, на которые ориентирован проект.

Итак, помните статью, в которой мы говорили про то, как вставить видео на сайт при помощи тегов html5? Сегодня знания от туда нам пригодятся. А в этой статье я не буду подробно описывать каждую строчку.

HTML разметка

Сразу после тега </body> вставьте фоновое видео на сайт следующим образом. Если хотите подробнее разобраться, читайте статью, о которой я упоминал выше.

<video autoplay loop>
 <source src="video/video2.mp4" type="video/mp4">
 <source src="video/video1.webm" type="video/webm">
 <source src="video/video3.ogv" type="video/ogg"/>
</video>
 
<p>Smartlanding</p>

CSS разметка

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

video{
   position:fixed;
   z-index:-1;
   min-width:100%;
   min-height:100%;
   overflow:hidden;
}

p{
 font-family: 'courgette';
 color:#fff;
 font-size: 80px;
 text-align: center;
 padding-top: 20%;
 text-shadow: 0 1px 1px #000a33;
}

Но, если хотите сделать видеофон только, например, первого экрана, то измените значение position на absolute. Буду искать еще способы подключения видео в качестве фона, так как не люблю я это абсолютное позиционирование. Даже текст подвинул padding_ом. Но страничка грузится намного быстрее чем те, которые были в примере.

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

Скачать исходник

10 рекомендаций по использованию фонового видео на сайте

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

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

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

Так как нам избежать ошибок и сделать все правильно? Легко, просто следуйте этим 10 советам.

Сжимайте видео, насколько это возможно

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

Чтобы избежать этого, надо сжать видео до минимального приемлемого для нас битрейта. Есть соблазн использовать высококачественное видео в разрешении 1080p, чтобы повысить четкость и красоту, но это совершенно не стоит компромисса с увеличением времени загрузки и прерываемым стримингом.

Вам стоит использовать видео 720p с низкой частотой кадров (24-25 кадров в секунду) и протестировать несколько разных битрейтов от 750k до 1250k. Также есть несколько хаков, которые помогут скрыть низкое качество видео, но о них чуть позже.

Используйте наложение для скрытия артефактов

Если вас не радует качество вашего видео, или же у видео, устраивающего вас качества, есть проблемы с плавностью, вам стоит попробовать добавить слой-наложение к видео, что поможет замаскировать его качество. Это легко делается путем добавления абсолютно спозиционированного div сразу после видео или с использованием псевдо-элемента ::after в контейнере видео.

Вам надо применить к этому элементу свойство CSS pointer-events: none;, чтобы он не препятствовал управлению проигрыванием видео.

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

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

Ограничивайте общий размер и длину видео

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

Всегда ограничивайте длину вашего видео в рамках 30–40 секунд, а лучше еще более короткий момент, бесшовно закольцованный и выглядящий как длинное видео, но размером не больше 1–2 мегабайт. Немного рекламы: вы можете найти несколько неплохих закольцованных видео на BG Stock, этот видеосток я создал специально для использования видео в качестве фона на сайтах (впрочем, хватает и других видеостоков).

Избегайте чрезмерного движения

Ключевое слово в сочетании “фоновое видео” — “фоновое”. Видео играет вспомогательную роль по отношению к контенту сайта и мы должны обеспечить, чтобы оно не перетягивало внимание на себя. Фоновые видео должны быть ненавязчивыми и плавными, чтобы не отвлекать пользователей от того, для чего они пришли на сайт. А, значит, надо избегать быстрого или чрезмерного панорамирования, трясущейся/нестабилизированной съемки и внезапного обрыва видео.

Обеспечьте достаточный контраст для текста на переднем плане

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

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

Обеспечьте заполнение фоном всего контейнера

В CSS3 есть отличное и широко известное свойство background-size и одно из его возможных значений cover позволяет фоновому изображению занимать столько пространства, чтобы закрывать весь элемент, ни больше и ни меньше, сохраняя при этом оригинальное соотношение сторон.

И есть менее известное свойство object-fit, позволяющее проделывать тот же трюк с элементами DOM, что является отличным способом обеспечить заполнение нашим видео контейнера. К сожалению, поддержка в браузерах этого свойства пока недостаточна (привет, IE!), поэтому приходиться использовать полифилл или JavaScript для достижения такого поведения.

Самый простой вариант: jQuery плагин jQuery Background Video (написанный автором этой статьи — Энгусом Расселом), который берет все эти заботы на себя, а также делает несколько других полезных вещей. Это не единственный плагин jQuery для фонового видео.

Адаптируйте для разных устройств

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

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

Как вы это сделаете зависит от вас — вы можете спрятать видео на маленьких экранах с помощью медиа-запроса или удалив видео для всех устройств iOS/Android, после проверки пользовательского агента с JavaScript. Плагин jQuery Background Video делает это по умолчанию.

Не зацикливайте видео навсегда

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

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

Вышеупомянутый плагин jQuery Background Video позволяет настроить остановку воспроизведения видео через указанное время.

Добавьте кнопку паузы

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

Мы можем легко добавить кнопку паузы с помощью JavaScript — а в jQuery Background Video эта кнопка добавляется по умолчанию и вам надо лишь определиться с ее размещением и стилями.

Предусмотрите затухание

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

Мы можем сделать это, добавив изображение в качестве фона для элемента, содержащего <video> и задав видео прозрачность 0 по умолчанию (1 при начале воспроизведения), а также добавив CSS-переход свойства прозрачности. Это тоже есть в плагине jQuery Background Video.

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

Слои на задний/передний план при помощи CSS: z-index

В данной статье речь пойдет о том, как поместить слой или элемент в HTML на передний/задний план при помощи CSS. А точнее при помощи свойства z-index.

Скорее всего, каждый из вас в детстве делал Аппликации. Это процесс, когда на лист бумаги поверх вы приклеиваете различные элементы — дома, деревья, облака и так далее. Получается что-то вроде подобия 3-d изображения, где каждый элемент, далее просто слой, наклеен поверх другого. Все они наклеены на лист бумаги.

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

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

Для начала стоит запомнить, что z-index не работает, если у элемента не задано свойство position с значениями absolute, relative или fixed. Это имеет место, так как накладываться, а следственно и размещать их на различных уровнях слоев нужно будет, только если вы начнете наезжать одним элементом на другой за счет position и bottom, top, left, right. Но не только в этом случае может понадобиться расставление z-index. Наезжать элементами друг на друга можно за счет отрицательных значений margin и другими способами.

Если вы не указываете z-index, то для всех элементов по-умолчанию он равен 0. z-index может принимать как положительные так отрицательные целые значения. В случае значения по-умолчанию элементы будут накладываться друг на друга по тому, чем дальше прописан элемент в коде тем он будет на более переднем плане(в Демо пример №1).

Вот как может выглядеть код CSS-стилей для 3 <div> с заданными z-index, так что они располагаются по принципу, чем первее <div> в коде, тем он более на переднем плане (противоположно принципу по-умолчанию), это в Демо пример №2:

div {position: absolute; text-align:center; font-weight:bold;}div.first {width:100px; height:100px;  background:#006600; left:0; top:50px; z-index:2;}div.first2 {width:100px; height:100px; background:#990000; left:50px; top:100px; z-index:1;}div.first3 {width:100px; height:100px; background:#99FF66; left:100px; top:150px; z-index:0;}

Важно понимать, что браузер будет сравнивать z-index только у элементо расположенных на одном уровне вложенности и, даже если у внутреннего элемента z-index больше, чем у элементов расположенных на одном уровне с его родителем, то он будет отображаться на заднем плане по отношению к ним (в Демо пример №3).

Вы можете просмотреть эффект в Демо:

Как добавить фон на веб-страницу

Как добавить фон на веб-страницу?

Далее: Загрузите фоновое изображение на свой веб-сайт / сервер. Где вы решите загрузить изображение на свой сервер, зависит от вас.

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

Создание HTML-кода: При использовании HTML-кода для отображения фона на вашей веб-странице вы поместите путь (URL) к фоновому изображению внутри

* Если вы храните изображения в папке (подкаталоге) на вашем сервере, вам нужно будет включить имя папки в HTML-код внутри тега body:

Пример: Допустим, для примера, вы сохранили фон, который называется «cutebirdbackground.gif», и загрузили его в папку на своем сервере. под названием «изображения» ниже приведен пример кода HTML, который будет использоваться.

Создание кода CSS: Код CSS означает «Каскадная таблица стилей».Код CSS находится между

Имя	Страна	Возраст
	<таблица>
Джон	США	21
Сэм	Испания	22

В приведенном выше коде в теге таблицы используется встроенный стиль.Это изменит фон всей таблицы. Если вы хотите изменить цвет фона определенной строки, добавьте встроенные стили с атрибутом background-color в теге tr. Сделайте то же самое с тегом td, если вы хотите изменить цвет фона определенного столбца.

Изменение цвета фона текста

На веб-странице всегда много текста. Как правило, тексты не имеют определенного цвета фона. Но если есть необходимость в тексте с определенным цветом фона, встроенные стили можно использовать и в теге span.Ниже приведен пример изменения цвета фона текста с помощью встроенных стилей.

у этого текста нет цвета фона

этот текст имеет красный цвет фона

этот текст имеет зеленый цвет фона

В приведенном выше коде первый абзац не имеет цвета фона.У второго абзаца фон красного (# FF0000) цвета, а у третьего абзаца фон зеленого (# 00FF00) цвета.

Заключение

С цветами все выглядит лучше. Цвета играют большую роль в веб-дизайне. В начале истории Интернета на экранах не было цветов. Итак, первые реализации HTTP / HTML не имели такой поддержки. Они часто используются в HTML и CSS для создания привлекательных веб-страниц. Цвета могут быть применены ко всей веб-странице или к некоторой части веб-страницы с помощью тега div.Таблицам также можно задать цвет фона HTML. Даже определенные строки и столбцы также могут иметь цвет фона. Цвет фона также можно применить к тексту с помощью тега span. HTML и CSS предоставляют множество возможностей для изменения цвета фона практически всего. Следует только знать, как эффективно использовать эти параметры, чтобы веб-сайты выглядели более привлекательно и лучше.

Установить или изменить цвет фона HTML

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

Определение и использование.

Свойство HTML background-color задается для изменения или установки цвета фона элемента. Фон - это общий размер элемента, включая отступы и границу, но не поля.

Установить свойство background-color в элементе HTML

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

Пример 1: