Как сделать картинку между блоками, адаптивно?

Question

[Smeecy Smeecy]

Как лучше реализовать картинку, которая располагается , вне рабочей области и между блоками , которых есть background-image? Моё предположение , что это можно сделать через абсолютное позиционирование картинки , родителем будет являться один из блоков или же через псевдоэлементы, но тогда встает вопрос адаптивности, так как картинка , на маленьких разрешениях будет почти по середине экрана или же её убирать при max-width: 768.

UPD.
Или , что если загнать эти 2 блока в один общий, при этом задать ему бэкграунд с этой картинкой в формате Png с прозрачным фоном, а остальным задать свои background-image , будет ли так работать?

Пример:

Comments

[Иван]

об адаптивности долже был думать дизайнер :)

2 вариант засоряет html,это плохо..

легче задать к картинке position:absolute и будет позиционироваться относительно body

Смысл адаптивости в том,чтобы основной контент был доступен на мобильных устройств( а никак новостные сайты делают,с кучой рекламы) ,если картинка важна,то можно вставить,но из-за того,что она находится за основным контейнером,то можно забить. ИМХО

[Smeecy Smeecy]

Иван: ну вот и я так подумал , ну вышло так, что верстка для устройств , полностью на моё усмотрение а макет лишь для ПК:)

[Иван]

Smeecy Smeecy: русский фриланс,где заказчики не хотят платить за мобильную версию сайта дизайнерам)

[Smeecy Smeecy]

Иван: или дизайнеры просто ленятся )

Answer 1

[Андрей Федоров]

Не понятно что как должно работать при небольшой ширине экрана. Предварительно пока так https://codepen.io/aliencash/pen/ZJzRYQ
Давайте подробности.

Comments

[Smeecy Smeecy]

разве , если картинка останется за экраном, горизонтального скролла не будет?

[Андрей Федоров]

Smeecy Smeecy: Он у меня убран для body - overflow-x: hidden;