> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weblium.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Добавление фона на сайт

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

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

||| ${color}[#f97700](Важно:) имейте в виду, что на данный момент нет возможности добавить единый фон ко всему сайту. Фон должен быть установлен для каждого блока на странице отдельно.

# Добавление фона на сайт

1. Для этого наведите на нужный блок и перейдите в его настройки, кликнув на появившийся «бегунок»:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1021-1_3170ul.png)

2. В новом окне откройте вкладку **Фон** и выберите одну из трёх опций — **Цвет**, **Изображение**, **Видео**:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1022-1_8xkrgj.png)

### Добавление цветного фона

Опция **Цвет** даёт возможность залить фон блока сплошным цветом либо же выбрать градиент. 

1. После включения этой опции выберите один из предложенных цветов из существующей палитры сайта:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1022-1_8xkrgj.png)

| ${color}[#1aa900](Подсказка:) чтобы изменить текущую палитру сайта, обратитесь к статье [Изменение цвета текста](https://help.weblium.com/ru/article/izmenenie-cveta-teksta-12ol0zd/).

2. Если вы хотите выбрать собственный цвет, нажмите на иконку заливки и подберите нужный цвет. Вы также сможете настроить прозрачность заливки справа от палитры:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1023-3_1rb1bgl.png)

3. Если вы выбрали собственный градиент, здесь вы можете настроить два основных цвета, а также градус градиента, чтобы обозначить его направление:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1024-2_1w7skj1.png)

### Добавление картинки на фон

С помощью опции **Изображение** вы можете загрузить собственную картинку или же выбрать одну из стоковых изображений в галерее.

1. Кликните **Загрузить** и выберите файл с вашего устройства. При клике на кнопку **Галерея** вы перейдёте к уже загруженным изображениям на сайт, или же сможете добавить бесплатные стоковые изображения с платформы [Unsplash](https://unsplash.com/):

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1025-1_113oiee.png)

2. Как только добавите картинку, у вас откроются новые инструменты для настройки изображения — эффекты прокрутки, фильтры и заливка:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1027-3_1pb2mel.png)

| ${color}[#1aa900](Подсказка:) узнайте больше о том, как создать иллюзию объёма для фоновых изображений, в статье [Настройка параллакс эффекта](https://help.weblium.com/ru/article/nastrojka-parallaks-effekta-dshaa6/).

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

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1028-2_1fy3p2f.png)

### Добавление видео на фон

В разделе **Видео** вы сможете добавить видео на фон только с платформ [Youtube](https://www.youtube.com/) или [Vimeo](https://vimeo.com/).

| ${color}[#1aa900](Подсказка:) YouTube видео в формате shorts не поддерживается, поэтому нужно будет в ссылке заменить `shorts/` на `watch?v=` чтобы преобразовать его в стандартный формат.

1. Для этого вставьте соответствующую ссылку в нужное поле:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1029-2_gpcc9z.png)

| ${color}[#1aa900](Подсказка:) после добавления фонового видео оно будет отображаться статичным для поддержания скорости работы редактора. На опубликованном сайте видео будет проигрываться как нужно.

2. Как только видео будет добавлено, у вас появится возможность наложить на него другой цвет, чтобы оно соответствовало выбранной цветовой палитре сайта:  

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1026-1_nbzl1w.png)

|| ${color}[#ffa800](Примечание:) для фоновых видео по умолчанию выключен звук, чтобы не портить взаимодействие пользователей с сайтом.

Не забудьте [опубликовать свой сайт](https://help.weblium.com/ru/article/publikaciya-sajta-1xvrq6l/), чтобы изменения вступили в силу.