Фонове зображення на весь сайт у Wix Studio: простий спосіб, якого немає “з коробки”

Wix Studio відкриває багато можливостей для кастомізації, але іноді базових функцій… просто немає. Один із найпоширеніших запитів — як зробити одне фонове зображення для всього сайту, щоб воно покривало всі сторінки.

У звичайному Wix Editor така опція є, але у Wix Studio — відсутня. Добра новина: це легко вирішити за допомогою невеликого CSS.

Чому це потрібно робити вручну?

• У Wix Studio фон задається для секцій, а не для всієї сторінки.

• Якщо вам потрібен єдиний фон, що тягнеться по всій висоті під усіма секціями — потрібно стилізувати елемент .page.

• Такий підхід особливо актуальний для сайтів у стилі minimal, one-page, glassmorphism, портфоліо, креативних студій.

Як це працює?

Ми додаємо стилі до глобального класу .page — це контейнер всієї сторінки у Wix Studio.До нього підключаємо зображення, задаємо cover, фіксуємо фон на десктопі і додаємо адаптивний варіант для мобільних.

CSS-фрагмент, який потрібно додати

Додається у global.css

.page {

background-image: url("посилання на ваше зображення");

background-size: cover;

background-position: center;

background-repeat: no-repeat;

background-attachment: fixed;

min-height: 100vh;

}

@media (max-width: 768px) {

.page {

background-image: url("посилання на ваше зображення") /* інше зображення для мобільної */

background-attachment: scroll; /* для стабільної роботи на мобільних */

background-size: cover;

background-position: center;

}

}

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