Как реализовать верстку (фоновое изображение)?
Подскажите, пожалуйста, как лучше реализовать верстку следующего дизайна?
По тз необходимо, чтобы первый экран растягивался на всю высоту вьюпорта, т.е min-height: 100vh;
Из данного макета я могу вытянуть волны в SVG, а также изображение детей с иконками, либо соединить все слои (волны + дети). По макету изображение с детьми должно быть прижато к нижнему краю и держатся в рамках контентной области.
Когда я вставляю волны в виде background-image, У меня возникает проблема при адаптации: при изменение разрешения экрана волны смещаются по высоте.
Показываю наглядно, что получается при ресайзе с волнами:
- При таком разрешении выглядит хорошо
- Но вот что происходит на 19201000 и 19201200
Что посоветуете? Из вариантов было вставить как изображение и на абсолютах растянуть изображение, но тогда и контент необходимо размещать абсолютно, что не самый лучший вариант.
И еще мысль была, это убрать для хедера min-height: 100vh и поставить min-height: 800px к примеру, но это уже несоответствие макету.
Буду благодарна за любые мысли и советы)
Ответы (1 шт):
Попробуйте вот это:
background-repeat: no-repeat;
background-size: cover;
background-position-y: 100px;
В background-position-y установите желаемый отступ сверху, тогда получится, что фоновая картинка не будет съезжать вниз, а будет растягиваться до конца блока, но с учетом отступа сверху