Как добавить изображение на фон?
Расскажем про два способа добавления фонового изображения в Taptop. Например, это пригодится, чтобы создать привлекательный первый экран для вашего сайта.
Смотрите видео:
https://vk.com/video-219751701_456239226
Подготовка
Для начала подготовьте нужный блок:
- Создайте блок, куда нужно добавить фоновое изображение.
- Добавьте заголовок и для наглядности задайте для Root фон черного цвета.
Способ 1: Использование свойства Background image
Этот способ позволяет добавить фоновое изображение напрямую к секции.
- Выберите секцию, которой хотите добавить фоновое изображение.
- В правой панели найдите раздел Фон (Fill) и нажмите на иконку изображения.
- Выберите ранее загруженную картинку или загрузите новое изображение.
- Установите свойство Покрывать (Cover), чтобы изображение автоматически адаптировалось и покрывало всю секцию при изменении ее размера.
Готово! Теперь ваше изображение установлено как фон секции.
Способ 2: Использование виджета Image с абсолютным позиционированием
Для этого способа нужно добавить дополнительный элемент Image.
- Добавьте виджет Image в нужную секцию.
- Установите ширину и высоту виджета на 100%.
- Задайте абсолютное позиционирование. Теперь картинка будет растягиваться на всю площадь секции, игнорируя другие объекты.
4. Настройте Z-index для текста, который должен отображаться поверх фонового изображения. Этот параметр у текста должен быть больше, чем у виджета Image. Для этого выберите текстовый элемент и задайте для него значение Z-index равное 1.
5. Кликните два раза на виджет Image на холсте и выберите нужное изображение.
Готово! Изображение загружено в виджет Image и выглядит как фон секции.
Резюме
Сделать фоновое изображение для блока можно, используя:
- свойство Background image;
- виджет Image с абсолютным позиционированием.
Оба способа эффективны, выбор метода зависит от ваших конкретных задач и предпочтений.