> ## 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/screenshot1_1xheyib.png)

2. У новому вікні перейдіть у вкладку **Фон**, далі виберіть один із трьох варіантів — **Колір**, **Зображення** або **Відео**:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/screenshot2-2h_1mujvcp.png)
### Додавання кольорового фону

Параметр «Колір» дозволяє додати суцільний колір або градієнт як фон.

1. Опісля ввімкнення цієї опції виберіть колір із поточної палітри кольорів вебсайту:


![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/screenshot2-2h_81v108.png)

| ${color}[#1aa900](Підказка:) ви можете дізнатися, як налаштувати палітру кольорів сайту в статті [Кольорова палітра сайту](https://help.weblium.com/uk/article/kolorova-palitra-sajtu-j3die1/).

2. Щоб вибрати власний колір фону, натисніть на іконку заливки та оберіть відповідний колір. Ви також можете налаштувати прозорість за допомогою перемикача праворуч від палітри:



![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/screenshot5_iswvfr.png)

3. Якщо ви обрали власний градієнт, ви зможете налаштувати два основних кольори, а також кут для визначення напрямку градієнта:


![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/screenshot4_1y1una4.png)

### Додавання зображення до фону

Вибравши опцію **Зображення**, ви можете завантажити власні зображення на фон блоку або вибрати зображення з галереї.

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

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/screenshot6_1xo7i7s.png)

2. Якщо ви встановите зображення на фон, вам відкриються додаткові налаштування — наприклад, застосування фільтра, ефект прокрутки, корекція кольору тощо:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/screenshot7_11vbhht.png)

| ${color}[#1aa900](Підказка:) ви можете знайти більш детальну інформацію про ефект прокрутки у статті [Налаштування паралакс-ефекту](https://help.weblium.com/uk/article/nalashtuvannya-paralaks-efektu-c75qmv/).

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

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/screenshot8_pvu01i.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/screenshot9_mf6ete.png)

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

2. Щойно ви додасте відео, у вас з'явиться можливість накласти на нього інший колір, аби воно відповідало обраній палітрі кольорів на сайті:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/screenshot10_1rbs3km.png)

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

[Опублікуйте сайт](https://help.weblium.com/uk/article/publikaciya-sajtu-16hom55/), щоб зміни вступили в силу.