How to correctly insert a block to the full width of the screen in container?

Question

css

There is a page with a couple of text blocks displayed inside a .container (bootstrap3).
The task is to insert a picture between them for the entire width of the screen without changing the layout structure.
The first and obvious one is position: absolute; width: 100% float: left; and calculate height with js for padding.
Maybe there are other solutions?

Answer 1

Всмысле "между ними"? на заднем фоне?

Answer 2

С помощью псевдоклассов css, например
не забываем родителя сделать релятивным

Answer 3

codepen.io/STutukov/pen/MyRJwm
Либо с помощью js закрывать .container
вставлять блок с картинкой