Как сделать адаптивное фоновое изображение за пределами контейнера?

Question

[SeriousAnonymous]

Очень нуждаюсь в помощи создания такого блока:
Красные полоски на картинки изображают контейнер.


Бьюсь над задачей уже не первый день, но никак не могу найти верного решения с размещением фона в флекс контейнере. Пробовал через позиционирование, но фон залазит на правый блок при уменьшении экрана.
Может есть примеры или советы по решению такого рода задач?

Comments

[Антон Литвиненко]

дать блоку который на всю ширину бекграунд на пол ширины? а в нем уже контейнер и все остальное

Answer 1

[andand44]

Есть несколько способов.
https://css-tricks.com/full-width-containers-limit...
Например такой

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}