Растянуть изображение на несколько делений

Question

Как мне растянуть фоновое изображение контейнера 1 до контейнера 2?

<div class="main_container">
   <div class="container" id="container-1"></div>
   <div class="container" id="container-2"></div>
</div>

Я использовал эту функцию, но она работает не всегда.

var posX = 0;
var posY = 0;
var i = 0;
$(".container").each(function (ind, el) {
    $(this).css("background-position", posX.toString() + "% " + posY.toString() + "%");
    posX += 20;
    i++;
    if (i == 1) {
        i = 0;
        posX = 0;
        posY += 0;
    }
})

---

Вот изображение 2 контейнеров:

---

Спасибо

Answer 1

Если родительский элемент .main_container содержит только 2 .container деления и фоновое изображение должно быть загружено на страницу через #container-1, тогда я бы использовал JavaScript для переноса фонового изображения из #container-1 в .main_container. Фоновое изображение будет охватывать всю область - и #container-1, и #container-2.

const parent = document.querySelector('.main_container')
const image = document.querySelector('#container-1').style.backgroundImage
parent.style.backgroundImage = image

Answer 2

Вы пробовали это?

.main_container {
  align-content: stretch;
  background-image: <url>;
}