Ankhena

Типа того:

background: url("путь к левой картинке") no-repeat left bottom, 
                    #fff url("путь к правой картинке") no-repeat right center;

При наложении, выше окажется тот фон, который ближе к началу записи, последний - самый нижний.

Думал контейнеру-родителю указать отрицательные маржины

Да, все правильно, просто их же надо еще компенсировать шириной.
https://jsfiddle.net/s3Lm0p75/

Гридами: https://codepen.io/anon/pen/xoRVEm?editors=1100
Флексами: https://codepen.io/anon/pen/WqRLNY

Для этого нужны свойства background-repeat со значением no-repeat и background-position со значением center

object-fit
Высоту придется задавать 100% (если нельзя писать height, не знаю уж почему, то можно растянуть абсолютом или флексом), потому что высоту вашей картинки не хватает, чтобы заполнить всю область.
Разумно использовать картинки с размерами пропорциональными размерам блока (в вашем случае квадратные)

Обычными инлайн блоками
https://jsfiddle.net/eod8kv0p/

Либо svg либо радиальные градиенты css.yoksel.ru/radial-gradients

Вариантов масса, по ссылке 3 разных: флоатом, флексом, гридами https://jsfiddle.net/8x3z7htn/

Не задавайте ему ширину вовсе или задавайте минимальную/максимальную
https://jsfiddle.net/n17Lxj8z/

Варинтов много.

1. Псевдоэлемент для родителя и абсолютное позиционирование https://jsfiddle.net/h21jnfxu/
2. Псевдоэлемент для родителя и order для псевдоэлемента.
3. Псевдоэлемент для дочернего (любого), ему абсолют и relative блоку
4. Псевдоэлемент для дочернего (любого), ему абсолют и relative основному контейнеру
5. Фон для контейнера.

Выбор варианта зависит от макета и его судьбы при адаптации.

transform: rotate(90deg); контейнеру

<meta name="theme-color" content="#f00">

Задавайте фоновый цвет в формате rgba, вместо прозрачности всего блока.
https://jsfiddle.net/7xjgb0w1/

p.s. у вас дикая вложенность, обычно 2х уровней достаточно.

body main .footer .slide .img-1 .hover-block a span

это жесть, используйте классы
вряд ли существует main, который не лежит в body и т.д.

Один родитель, 3 ребенка.
У ребенка внутри картинка и текст.
C помощью nth-child и order менять расположение картинки.

Прокатит ли позиционирование абсолютом с процентами?

Прокатит.
Только от середины считайте.

Вариантов полно разных
Можно считать nth-child и ставить/убирать отступы https://codepen.io/anon/pen/KLMxyO (calc у меня там в развернутом виде, нужно сократить).
Можно имитировать отступы с помощью border или box-shadow.
Можно использовать padding вместо margin и, возможно, доп обертку внутри итемов.
Можно сделать доп контейнер и задать отрицательный margin для компенсации "выпирающих" margin у итемов.
Можно приплести js.

Вам нужно:
(наверное)

background-position: center bottom; 
background-size: cover;

И плюс отрезать от самой картинки лишние верхние и нижние поля либо компенсировать их через bg position. Но поскольку вы хотите адаптив, то проще отрезать, чем считать проценты.

Еще, опять таки, потому что вы хотите адаптив, нужно сделать несколько картинок и менять их через @media, чтобы не грузить на мобилках 4к картинку.

Потому что в шапке флоаты без clearfix.
Для наглядности: https://jsfiddle.net/w865Lm09/ видите блок со ссылками выпирает? Вот он и мешает. Всего на 1px, а какой эффект.

Такие вещи делают флексами:
https://jsfiddle.net/n178eh32/