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

Содержание

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

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

Давайте посмотрим примеры подобных сайтов. Большинство из них, неоправданно долго грузятся — и это главный минус видеофона. Но это не всегда так. Все зависит от того, как оптимизировано видео, какой оно продолжительности и так далее. Можно и 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_ом. Но страничка грузится намного быстрее чем те, которые были в примере.

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

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

Как изменить цвет фона в HTML

Раздел: Сайтостроение / HTML /

Вёрстка сайта с нуля 2.0

Как научиться верстать сайты любой сложности и под любые устройства, даже если сейчас Вы не знаете, что такое HTML? Есть несколько способов, но самый доступный — это видеокурс. Подробнее…

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

Во всяком случае, обучение начинающих без этого не обходится.

Итак, если вы читали статью об обязательных тегах, то вы знаете, что текст страницы располагается между тегами <body></body>. Однако тег <body> не только определяет, где должен быть текст страницы, но и может задавать многие параметры, общие для всех элементов страницы.

Тег <body>

Слово body переводится с английского как “тело”. Всё, что находится между тегами <body></body> — это тело HTML-документа, это основа основ HTML-страницы.

В HTML4 (а также в XHTML) тег <body> может принимать множество атрибутов, управляющих цветом и фоном документа. Некоторые браузеры предоставляют дополнительные атрибуты для этого тега, однако мы не будем выходить за рамки стандарта HTML 4.

Всё, что находится между открывающим тегом <body> и закрывающим тегом </body> называется содержимым тела.

Закрывающий тег </body> в HTML можно не указывать, однако для совместимости с XHTML лучше все теги делать парными.

Атрибуты тега <body> условно можно разделить на три части:

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

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

На этом краткое знакомство с тегом <body> пока закончим, и перейдём к теме данной статьи.

Как задать цвет фона в HTML

Для задания цвета фона документа (страницы) используется атрибут bgcolor:

<body bgcolor="red">

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

В теге <body> можно задать цвет не только для фона, но и для текста страницы:

<body text="yellow" bgcolor="green">

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

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

Как создать свой сайт

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

Помощь в технических вопросах

Помощь студентам. Курсовые, дипломы, чертежи (КОМПАС), задачи по программированию: Pascal/Delphi/Lazarus; С/С++; Ассемблер; языки программирования ПЛК; JavaScript; VBScript; Fortran; Python; C# и др. Разработка (доработка) ПО ПЛК (предпочтение — ОВЕН, CoDeSys 2 и 3), а также программирование панелей оператора, программируемых реле и других приборов систем автоматизации. Подробнее…

Настройка фона веб-страницы

  
  background="  имя файла изображения  " 
 bgcolor="  определение цвета  " 
 bgproperties="fixed">

Устанавливает фоновое изображение страницы
Устанавливает цвет фона страницы
Непрокручиваемый фон

Графику можно использовать не только по отдельности, но и настроить ее на повтор или 9 повторов. 0015 плитки сами по экрану, тем самым создавая фон для вашей веб-страницы. Это достигается с помощью атрибута background в элементе body. Значением атрибута background может быть любое имя файла изображения, однако есть несколько важных моментов, которые следует учитывать при выборе фонового изображения:

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

Бесшовность

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

Сначала мы пропустим mycoolpic.gif через специальный фильтр, чтобы создать бесшовную версию:

Исходный (1)

Бесшовный (2)

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

Пример 1. Мозаика изображения с различимыми краями

Пример 2. Бесшовное мозаичное изображение

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

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

...где определение цвета равно любому допустимому определению цвета (описание всех допустимых определений цветов см. в описании цвета шрифта).

Контраст между фоном и цветом текста

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

Example 3

Black	#000000	Green	#008000
Silver	#c0c0c0	Lime	#00ff00
Gray	#808080	Оливковый	#808000
Белый	#ffffff	Желтый	#ffff00
Бордовый	#800000	Navy	#000080
Red	#ff0000	Blue	#0000ff
Purple	#800080	Teal	#008080
Фуксия	#ff00ff	Цвет морской волны	#00ffff

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

Example 4

Black	#000000	Green	#008000
Silver	#c0c0c0	Lime	#00ff00
Gray	#808080	Оливковый	#808000
Белый	#ffffff	Желтый	#ffff00
Бордовый	#800000	Navy	#000080
Red	#ff0000	Blue	#0000ff
Purple	#800080	Teal	#008080
Фуксия	#ff00ff	Цвет морской волны	#00ffff

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

Фон боковой панели

Другой способ использовать графику в качестве фона — использовать изображения, которые растягиваются по всей стандартной ширине веб-страницы и, следовательно, располагаются только вертикально. Такие фоны часто располагают декоративную кромку слева, которая при вертикальном расположении создает границу, идущую вверх и вниз по левой стороне страницы. Эти фоновые изображения широко известны как «боковые панели» и обычно имеют ширину 1025 пикселей, чтобы охватить множество возможных разрешений экрана. Магия установки фонового изображения в заключается в том, что если изображение слишком широкое для разрешения экрана монитора, обращающегося в данный момент к веб-странице, веб-браузеры обрежут лишнюю часть фонового изображения справа и отобразят только то, что соответствует размеру экрана. экран пользователя.

Вот пример ~ Фон боковой панели

Исправление фонового изображения на месте

Вы когда-нибудь задумывались, как некоторым людям удается зафиксировать свои фоновые изображения на месте, чтобы текст плавал сверху, когда вы прокручиваете страницу вверх и вниз? Это легко сделать с помощью bgproperties="fixed" Пара атрибут-значение в теге .

Пример:

А как насчет использования изображений в качестве ссылок?...

Рекомендации по оптимизации фонового видео HTML

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

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

Делайте фоновые видео короткими

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

Помните, что это фоновое видео, а не продукт или учебное видео. Видео не должно быть длиннее 15 или 20 секунд. Клип меньшей продолжительности сохраняет разумный размер и может начать потоковую передачу быстрее. Если вам нужно показать 60-секундный контент, возможно, вам нужно настоящее рекламное или маркетинговое видео!

Уменьшить движение и скорость

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

Оптимизация видеофайла

Здесь нужно сделать три основных действия:

1) Сохранить размеры Standard HD

Ваше видео может быть HD (высокой четкости), то есть видео 720p (1280 x 720 пикселей). На самом деле нет причин экспортировать фоновое видео в формате Full HD (1920 x 1080) — это просто излишество и потеря пропускной способности.

2) Поддерживайте низкую частоту кадров

Частота кадров 24 или 25 кадров в секунду достаточна. В конце концов, мы не продюсируем голливудский фильм! Меньшее количество кадров означает меньший размер файла.

3) Удалить аудиоканал

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

Что касается оптимизации видео, мы используем бесплатное приложение для Mac под названием Handbrake, которое существует уже много лет и имеет ряд предустановок и настроек, которые дают вам большой контроль. Если вы более техничны, вы можете оптимизировать видео с помощью командной строки, используя ffmpeg. Есть даже онлайн-сервисы, которые оптимизируют видео. Поиск в гугле выдаст десятки.

Оптимизация изображения афиши

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

Поддержка нескольких форматов видео

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

 <видеопостер="/bg-video-posterimage.jpg">

Мы предоставляем несколько форматов, поскольку не все браузеры поддерживают одни и те же форматы видео. Используя «исходные» элементы, браузер будет использовать первый из них, который он понимает (например, Safari будет использовать mp4, а Chrome — webm).

Теперь, когда видео готово для отображения на вашей странице, обратите внимание на следующие моменты:

Обеспечьте контрастность

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

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

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

Пример оптимизации фонового видео: Tesla

На момент написания этой статьи у Tesla есть фоновое видео на странице модели Y: https://www.tesla.com/modely

Это видео выглядит великолепно и демонстрирует их продукт в действие, похожее на рекламу. Несколько слов об этом видео:

Оно длится всего 14 секунд
Звук отсутствует (хотя в этом видео есть стереофонические аудиоканалы без звука. Возможно, их удаление может еще больше уменьшить размер файла)
Видео зацикливается
Есть элементы управления видео, если вы наводите курсор на видео, что позволяет пользователю приостановить его
Достаточный контраст, чтобы прочитать текст над видео
Оно в формате mp4 (они даже не обслуживаются webm в качестве альтернативного источника на рабочем столе)
Размеры 1254 × 1080 (нечетные размеры, но ближе к квадрату, чтобы соответствовать дизайну страницы)
Размер всего 2,9 МБ
Частота кадров 25 FPS
Скорость передачи данных составляет 1,68 Мбит/с
Они предоставляют альтернативную веб-версию для мобильных устройств

В целом, это хороший пример оптимизации фонового видео.

Окончательная оптимизация: мобильная версия

В зависимости от проекта может возникнуть необходимость показывать меньшее видео на мобильных устройствах или вообще не показывать видео (вместо этого использовать изображение) для экономии трафика ваших пользователей. Мы уделяем большое внимание Google Page Speed Insights и Core Web Vitals, о которых я говорил в своем посте «Улучшение работы с Google Page с помощью Core Web Vitals». Это очень важно, если вы хотите, чтобы ваш сайт отображал страницы быстро.

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

Для этого нам понадобилась помощь JavaScript. Мы уже использовали Lazy Sizes для отложенной загрузки изображений (это означает, что изображения не загружаются на страницу до тех пор, пока пользователь не прокрутит изображение, что позволяет страницам загружаться быстрее). Мы поняли, что существует плагин/расширение Lazy Sizes под названием Openhooks, которое расширяет lazySizes для дополнительной ленивой загрузки вещей, отличных от изображений, включая скрипты/виджеты, фоновые изображения, стили и видео/аудио элементы.

Вот пример того, как мы реализовали это для элемента видео. Пример кода находится в Twig, а рассматриваемый сайт был построен на Craft CMS, хотя этот метод также будет работать с другими языками шаблонов и другими системами:

 {# Обратите внимание на атрибуты 'data-' и пустое автовоспроизведение для плагина lazysizes servehooks, поэтому ничего из этого не загружается на мобильных устройствах.  #}

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

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

Надеюсь, вы сможете использовать эту статью в качестве справочного материала, если кому-то нужно создать видео и он задает такие вопросы, как «Как долго должна выполняться анимация, прежде чем она зациклится? Существуют ли технические параметры, которые должен знать аниматор, чтобы сделать файл « light', чтобы сократить время загрузки? Какой формат файла предпочтительнее?" - именно те вопросы, которые вызвали этот пост.

Штирлиц — Сеть печатных салонов в Перми