arrow-left
Вернуться к продуктам
Кратко о видео
В уроке разобраны два способа добавить фоновое изображение: способ 1 — background-image через правую панель секции с режимом «покрывать» (cover); способ 2 — виджет Image с 100% шириной и высотой и абсолютным позиционированием. Для каждого — плюсы, минусы и когда выбрать. Background-image проще добавить, но не поддерживает ленивую загрузку и параллакс. Виджет Image сложнее по структуре (нужен div-обёртка с overflow: hidden), но полностью управляем через CSS и поддерживает анимации скролла. Для hero-секции с параллаксом — только виджет Image. Урок для новичков, которые впервые добавляют фоновое изображение. Оба способа показаны пошагово. Для параллакс-эффекта посмотри дополнительный урок — там подробно разобрана структура с абсолютным позиционированием.

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

Нужно фоновое изображение в секции. Просто задать фон секции или лучше виджет Image? В чём разница и когда что выбирать?
Способ 1: секция → «Фон» → иконка изображения → «Покрывать». Простой и быстрый. Способ 2: виджет Image с абсолютным позиционированием и 100% ширины и высоты — больше контроля над поведением и анимацией. Для новичков. После просмотра знаешь два способа добавить фоновое изображение и когда что использовать.
Тайминги видео
00:00 — часто встречаю Вопрос Как поставить изображение 00:36 — блока первый способ выбираю секцию в 01:12 — в ней необходимо теперь поставить Z

Другие продукты академии

Как выйти на фриланс
Разберётесь, как брать первые проекты, называть цену и общаться с клиентами
Для кого
Специалистов
Направление
Фриланс
Формат
Мини-курс
Длительность
13 уроков
Taptop с нуля: сайт-портфолио
Осваиваете базу Taptop и собираете сайт-портфолио, который можно оставить себе
Для кого
Новичков
Направление
Вёрстка
Формат
Мини-курс
Длительность
9 уроков
Как дизайнеру понять вёрстку
Разберётесь, как устроены сайты, чтобы увереннее работать с ними дальше
Для кого
Новичков
Направление
Вёрстка
Формат
Интенсив
Длительность
2 урока
Как собрать сложную анимацию
Собираете сложную анимацию и плавный переход между страницами
Для кого
Для тех, кто в теме
Направление
Анимации
Формат
Интенсив
Длительность
2 урока