Однією з найпоширеніших завдань є можливість задати фон контейнеру. Як правило, це колір, градієнт або картинка.
Колір в якості фону
Що б задати колір в якості фону виберіть потрібний колір в палітрі або введіть його значення вручну. Попередньо включіть цю опцію, поставивши галочку в чекбоксі.
Увага! Якщо ви включите колір у фону, він перекриє всі інші фони елемента. Якщо вам необхідний певний колір в якості одного з декількох фонів елемента, створіть його через градієнт, вибравши однакові кольори у "прапорців".
Кнопка "1" скидає значення кольору. Панель зліва необхідна для вибору потрібної колірної гами. Панель праворуч задає прозорість кольору. Панель внизу дозволяє зберігати часто використовувані кольори.
Градієнт в якості фону
Другий варіант фону для блоку це градієнт. Градієнт може складатися з двох і більше кольорів. Що б додати "прапорець" з кольором два рази натисніть на смугу з вибором інтенсивності кольору.
Що б видалити "прапорець" просто натисніть на нього 2 рази і в панелі, натисніть на кнопку "видалити". Кольори градієнта так само можуть бути прозорими.
Градієнт може бути лінійним та радіальним. Що б перемикатися між режимами використовуйте кнопки 1 і 2. Кожен тип градієнта має свої настройки, і ви легко можете з ними експериментувати.
Так само у градієнта є 2 опції:
- - Кнопка повороту градієнта, яка при активації буде перевертати градієнт на 180 градусів.
- - Кнопка зациклення градієнта. При активації, градієнт буде нескінченно повторюватися.
Градієнт в якості фону
Одна з найпоширеніших функцій. Застосовувати даний функціонал рекомендується не тільки для кнопок, але і для контейнерів. Наприклад, якщо ви хочете вставити фотографію в якості фону, а потім розмістить ь на ній будь-якої контент. Краще вставити її в якості фону, а не за допомогою віджета "картинка". У разі, коли потрібно зробити адаптивний блок з фоновою картинкою, так само краще використовувати даний функціонал. При роботі з анімацією так само найчастіше користуються саме фоном, ніж виджетом
Нижче докладніше розберемо функціонал:
Насамперед встановіть радіобокс "Картинка", що б активувати даний функціонал. Далі вам необхідно завантажити фонове зображення. Це можна зробити двома способами:
- - Завантажити відразу з ПК
- - Завантажити за допомогою каталогу зображень
Після цих дій в залежності від типу і призначення фонового зображення встановіть настройки фону.
Виберіть положення фону (1) і подкорректируйте його при необхідності за допомогою бігунків справа (2). Так само встановіть правила повторення фону, або забороніть його (3).
Наступним важливим функціоналом є "розмір фону".
Він може приймати 3 значення:
Auto: Якщо задано одночасно для ширини і висоти (auto auto), розміри фону залишаються вихідними; якщо тільки для одного боку картинки (100px auto), то розмір обчислюється автоматично виходячи з пропорцій картинки.
Cover: Масштабує зображення зі збереженням пропорцій так, щоб його ширина або висота дорівнювала ширині або висоті блоку.
Contain: Масштабує зображення зі збереженням пропорцій таким чином, щоб картинка цілком помістилася всередину блоку.
Наступна корисна функція - це можливість зафіксувати фон. При активації даної опції фон буде зафіксований при прокручуванні сторінки. І буде створювати ефект схожий на ефект паралакса. Рекомендується використовувати даний функціонал, як альтернативу до даного ефекту на мобільних версіях і планшетах для прискорення завантаження сторінки.
Увага! Коли фон один, градієнт і картинка не буде працювати до тих пір, поки ви не активуєте його, натиснувши на червону іконку з оком.
Градієнт в якості фону
Створити новий фон ви можете, ввівши його назву в поле і натиснувши на кнопку "плюс". Кожен окремий фон можна вмикати та вимикати за допомогою іконки "очі" зліва.
Найчастіше функція кількох фонів застосовується для кнопок, коли необхідно одночасно задати градієнт і вставити іконку. Але так само часто її застосовують для "прикраси" елементів сайту, наприклад для затемнення зображення градієнтом.
Фони можна міняти місцями, перетягуючи їх мишею. В цьому випадку найперший фон буде самим верхнім.
Увага! Колір не є фоном. При його активації він перекриє всі фони елемента. Якщо необхідно задати колір в якості одного з фонів, зробіть це через градієнт. Галку "колір" в комбінації з іншими фонами рекомендується використовувати в разі необхідності з затемнення або освітлення кольором. (Виберіть колір і поставте в нього прозорість).