Возможно ли, чтобы несколько фонов вели себя как <div>?

Question

Я разрабатываю сайт, который требует нескольких фонов (кстати, они не сгруппированы на фотографии) Как будто вы должны собрать его, чтобы добиться макета.

Что я хочу сделать, это примерно так:

Это мой текущий код:

.multiple-backgrounds {
  background-image: 
    url('/backgrounds/bg-1.jpg'),
    url('/backgrounds/bg-2.jpg'), 
    url('/backgrounds/bg-3.jpg');

  background-repeat: 
    no-repeat, 
    no-repeat,
    no-repeat;

  background-size: 
    100% 810px, 
    100%,
    cover;

  background-position: 
    top, 
    top,
    top;

  background-color: #123 /* fallback */;
}

Но вывод просто продолжает складываться, и это правильно. Но есть ли обходной путь, чтобы сделать это как на скриншоте выше?