Как сделать фон для сайта

Как сделать фон для сайта

Практически любой сайт базируется на каком-нибудь фоне, бэкграунде. Дизайн фона обычно задается тегу body после чего мы имеем возможность его наблюдать на любой странице сайта. Фон для сайта, как правило, описывается в таблицах CSS, реже непосредственно в html коде страницы.

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

цвет фон для сайта
картинка фон для сайта
видео фон для сайта

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

Пример заполнения фона картинкой можем взять с сайта i-won.ru (на момент написания статьи). Изображение pattern21.png имеет размер 100x100px и заполняет весь экран слева-направо и сверху-вниз. Изменив картинку мы получим другой фон на сайте.

Пример CSS кода для создания фона сайта из картинки

body {
background-image: url("http://i-won.ru/wp-content/uploads/2019/04/pattern21.png");
}

Так выглядит изображение pattern21.png

Фон сайта

Итак, чтобы сделать картинку фоном сайта необходимо:
1) Выбрать картинку и разместить ее на хостинге;
2) Изменить в файле стилей CSS код описания тега body, добавив тег background-image с указанием пути до вашей картинки;
2) Сохранить изменения и посмотреть результат.

В современных шаблонах WordPress фон можно поменять не переписывая вручную файл стилей, а используя настройки Темы.

Как сделать фон на сайте на весь экран

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

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

Как сделать фон сайта нужного цвета

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

В случае с цветом мы поступаем аналогично, но указываем вместо пути до картинки фона - код цвета. При этом заменяем тег background-image (картинка) на background-color (цвет).

body {
background-color: #f5f5f5; /* код цвета */
}

Чтобы подобрать нужный цвет и оттенок вы можете воспользоваться бесплатным онлайн инструментом Color Picker

Как сделать двухцветный, градиентный фон сайта

Для получения CSS кода градиентного фона сайта используем генератор градиентного фона. Код оптимизирован для разных браузеров, в том числе и для старых IE. В левой части есть готовые цветовые схемы градиентов и настройки. Вы можете поменять угол цветового перехода, направление градиента. а также создать свой собственный, неповторимый фон (например в тон цветовой схемы вашего сайта).

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

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

Установка видео в качестве фона сайта, достаточно подробно описана в статье: Как установить видео фон на сайт. На главной странице сайта вы сможете посмотреть видео бэкграунд в действии.

Для сайтов на WordPress, тоже можно воспользоваться описанным в статье приемом либо, воспользоваться бесплатным плагином mb.YTPlayer for background videos или более продвинутыми платными плагинами Plugins Video Background WP.

Чтобы сделать видео фоном сайта понадобится видео фрагмент (видео клип), желательно "бесшовный", то есть, когда между концом и началом видео сюжета, переход не сильно заметен или сглажен спецэффектами (например размытие или мягкое наложение). Для платных плагинов подойдет не только видео клип размещенный на вашем сайте но и видео с Youtube или Vimeo.

Выводы

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

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

А на сайтах интернет магазинов, на большей части лендингов (продающих страницах), на бизнес и корпоративных сайтах - лучше использовать однотонные, спокойные фоны.

Автор

iwon

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *