Задать вопрос
@Krotorator

Как правильно верстать такие фоны для секций?

Всем привет!
Вопрос первый:

-часто случаются макеты, в которых часть фона одного экрана "зходит" на другой. Как правильно это реализовывать?
Для себя решение нашел только в том, чтоб эти секции оборачивать в одну обертку исключительно для для задания фона. Но это ладно, если таких секций с "общим" фоном две. А если весь макет части фона одного блока заходят на следующий блок?
оборачивать все в общий wrapper и задавать ему множественные фоны? Особенная боль начинается при адаптиве, вернее резине - использовать кучу медиа-запросов, чтоб постоянно подгонять bg-size\bg-position для нормального отображения при ресайзе... Плюс, если будет добавляться\меняться контент в разных секциях то и родитель-обертка будет менять размеры, соответственно фоны могут вести себя непредсказуемо и "ездить" куда-нибудь.

Кпримеру два случая:

номер раз
5ea1bfad5e58d220363921.jpeg

и номер два
5ea1bfd1b3732220570180.jpeg

в 1 случае три разных секции имеют частично общий фон. Плюс, на фоне завязаны элементы текста - он белый, и если фон будет сьезжать, то текст будет невидим.

Во 2 случае не так критично, в плане завязки контента на фоне, но, все равно, явно разные секции имеют общие элементы фона.

Какие бест-практис для таких случаев? Или вообще не фоном это делать, а картинками с позиционированием?

Вопрос второй:
вот этот лемент
5ea1c23f08344948223052.jpeg

-не париться и просто вырезать как png картинку?
-или заморочиться c svg с clip-path или mask-image, чтоб можно было менять бэкграунд у этой фигуры?

Как правильней? Все таки это элемент фона, не контентная картинка. С другой стороны, вдруг владелец сайта захочет под эту же маску какие-нибудь ромашки поставить...

Заранее всем спасибо за ответы!
  • Вопрос задан
  • 382 просмотра
Подписаться 1 Простой 6 комментариев
Решения вопроса 1
Palehin
@Palehin
Frontend
В блоке с текстом (relative) делать блок с position: absolute и творить с этим блоком что угодно. Background в svg ну или на крайняк в png
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы