Более разумный способ «сместить» элемент из его контейнера (с фоном)? ⇐ CSS

[Anonymous]

Мне нужно сделать такой макет:


Как видите, главное изображение смещено, а фон короче.
Мне удалось сделать это с помощью вложенных CSS-сеток и ' dummy' для добавления фона, но мне было интересно, есть ли более разумные способы, чем использование фиктивного элемента...
Я публикую код, потому что этот встроенный редактор, похоже, неправильно отображает код, который я использовал. Я прокомментировал все это, чтобы объяснить важные моменты.
https://codepen.io/stratboy/pen/YzbbXVa
Меня вынуждают Stackoverflow, чтобы написать немного кода. Вот немного HTML:




offset
Lorem Ipsum




И (S)CSS:
.wrapper{ // just to simulate real website
width: 1200px;
margin: 0 auto;
}

.container{ // main grid
display: grid;
grid-template-rows: 80px auto 120px;
grid-template-columns: 1fr;

// full width
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
}

.bg{ // dummy element for background
background-color: teal;
grid-row: 1 / 3;
grid-column: 1 / 2;
}

.child{
width: 1200px;
margin: 0 auto;
grid-row: 2 / 4; // offset for simulated padding
grid-column: 1 / 2;

display: grid; // it is a grid itself, so I can offset the "image"
grid-template-rows: 1fr 120px;
grid-template-columns: 50% 50%;
}

.offset.image{
grid-column: 1 / 2;
grid-row: 1 / 3;
background-color: cyan;
}

.text{
grid-column: 2 / 3; // restrict to first 2 rows to create the image offset
grid-row: 1 / 2;
background-color: green;
padding-bottom: 80px; // just to test
}



Подробнее здесь: https://stackoverflow.com/questions/786 ... background