Как добавить изображение на фон?

Расскажем про два способа добавления фонового изображения в Taptop. Например, это пригодится, чтобы создать привлекательный первый экран для вашего сайта.

Смотрите видео:

Подготовка

Для начала подготовьте нужный блок:

Создайте блок, куда нужно добавить фоновое изображение.

Добавьте заголовок и для наглядности задайте для Root фон черного цвета.

Способ 1: Использование свойства Background image

Этот способ позволяет добавить фоновое изображение напрямую к секции.

Выберите секцию, которой хотите добавить фоновое изображение.

В правой панели найдите раздел Фон (Fill) и нажмите на иконку изображения.

Выберите ранее загруженную картинку или загрузите новое изображение.

Установите свойство Покрывать (Cover), чтобы изображение автоматически адаптировалось и покрывало всю секцию при изменении ее размера.

Способ 2: Использование виджета Image с абсолютным позиционированием

Для этого способа нужно добавить дополнительный элемент Image.

Добавьте виджет Image в нужную секцию.

Установите ширину и высоту виджета на 100%.

Задайте абсолютное позиционирование. Теперь картинка будет растягиваться на всю площадь секции, игнорируя другие объекты.

4. Настройте Z-index для текста, который должен отображаться поверх фонового изображения. Этот параметр у текста должен быть больше, чем у виджета Image. Для этого выберите текстовый элемент и задайте для него значение Z-index равное 1.

5. Кликните два раза на виджет Image на холсте и выберите нужное изображение.

Резюме

Сделать фоновое изображение для блока можно, используя:

свойство Background image;

виджет Image с абсолютным позиционированием.

Оба способа эффективны, выбор метода зависит от ваших конкретных задач и предпочтений.