Как сделать чтобы фоновые картинки в секциях стыковались?

Question

[Qurel]

На сайте используются фоновые изображения для каждой секции, одно изображение плавно переходит в другое. Когда задаешь каждой секции изображение - они не стыкуются (я пробовала background-size cover, contain, 100%, 100% auto).
Сейчас я все секции обернула в блок .wrapper, объединила картинки и добавила общий фон блоку wrapper.
При разных разрешениях все плывет и не соответствует макету.
Сайт

Answer 1

[RAX7]

Стыки между секциями нужно верстать отдельными элементами.
Лучше всего фоновые картинки там, где это возможно сделать бесшовными текстурами. Из фоновой картинки с океаном можно отдельно вытянуть канал яркости (в фотошопе режим LAB) и смешать ее с обычным градиентом в режиме luminosity. Всё это позволит сильно сэкономить на размере картинок и получить результат близки к макету.