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

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

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

https://vk.com/video-219751701_456239226

VK Видео | YouTube

Подготовка

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

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


Блок и текстовый заголовок

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

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

  1. Выберите секцию, которой хотите добавить фоновое изображение.
  2. В правой панели найдите раздел Фон (Fill) и нажмите на иконку изображения.


Выбираем Фон → Изображение
Иконка изображения

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


Выбираем картинку

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


Выбираем в настройках параметр Покрывать

Готово! Теперь ваше изображение установлено как фон секции.


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

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

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


Виджет добавлен в секцию

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


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

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


У изображения абсолютное позиционирование

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


Задаем для текста Z-index 1, и он отображается поверх изображения

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


Выбираем изображение

Готово! Изображение загружено в виджет Image и выглядит как фон секции.

Резюме

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

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

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