Как сверстать макет с непрекращающимся background-ом?

Question

[Tutucu]

Как верстать подобные макеты? Когда background одного блока как-бы плавно перетекают в другие, или залезают на них.
Ссылка на макет

Особенно интересно разноцветное "колесо" в блоке "Как получать новых клиентов в инстаграмм", которое как-бы подлезает под верхний и нижний блоки и каждый кружок соответствует пункту и тексту списка справа. z-index?

Comments

[Олег]

Со стороны заказчика интерес или исполнителя?

[Tutucu]

Исполнителя

Answer 1

[devstudent]

используя события скролла, через джаваскрипт

Comments

[Tutucu]

Это же оформление страницы, а не какая-то анимация. Вы наверное не поняли вопрос, я имею ввиду как сделать так, чтобы background-image одного контейнера как-бы залазил на bg-image другой страницы. Т.е. что бы как на макете не было видно границ основных блоков. Если вы посмотрите на макет то там видно, что изображение айфона стоит выше конца предыдущего другого блока, а разноцветно колесо как-бы вылезает и bk предыдущего блока.

[Tutucu]

Опечатка: не "предыдущей страницы", а предыдущего блока

[devstudent]

для того чтобы фон одного блока залазил поверх фона другого, надо чтобы у того блока, чей фон сверху будет был выше z-index, а чтобы все было хорошо видно еще и опасти надо поставить меньше 1 , блок с телефоном может быть отдельным от верхнего и нижнего блоком, то есть не принадлежать им и тогда ставьте го куда хотите

[Tutucu]

Я так и думал, спасибо!

Answer 2

[Alex]

div :before :after
+
img position absolute

Comments

[Tutucu]

Т.е. верхушки и низ блока делать ::begore/after? А "тело" блока bg-image?

[Alex]

Tutucu: bg-image скорее всего не получится. Так что просто img

[Tutucu]

Но тогда получится, что страница будет статичной и, если количество, например, текста в контейнере увеличится он будет вылезать за пределы картинки и придётся переизменять размеры фонового img