Соединение повторяющихся и неповторяемых фонов без шва

У меня есть фон размером 700x300, который плавно повторяется внутри основного содержимого div. Теперь я хотел бы прикрепить div в нижней части content-div, содержащий другое фоновое изображение, которое не может быть повторено, плавно соединяясь с повторяющимся фоном над ним. По сути, неповторимое изображение будет выглядеть как конечная часть повторяемого изображения.

Из-за характера шаблона, если полная высота фонового изображения 300 пикселей не видна в последнем повторении фона content-div, фон в div ниже не будет легко соединяться. По сути, мне нужно, чтобы высота div содержимого была кратной 300 пикселей при любых обстоятельствах. Как лучше всего подходить к такого рода проблемам?

Я пробовал изменять размер content-div при загрузке страницы, но это работает только до тех пор, пока содержимое div не содержит динамического содержимого, изменяющего размер, что не в моем случае:

function adjustContentHeight()
{
    // Setting content div's height to nearest upper multiple of column backgrounds height, 
    // forcing it not to be cut-off when repeated.

    var contentBgHeight = 300;
    var contentHeight   = $("#content").height();
    var adjustedHeight  = Math.ceil(contentHeight / contentBgHeight);

    $("#content").height(adjustedHeight * contentBgHeight);
}

$(document).ready(adjustContentHeight);

То, что я ищу, есть способ ответить на событие изменения размера div, но там похоже, что это не так. Кроме того, предположим, что у меня нет доступа к JS, контролирующему изменение размера содержимого в content-div, хотя это потенциально способ решения проблемы.

Еще одно потенциальное решение, о котором я думал, - это смещение фонового изображения в нижнем div на определенную величину, зависящую от высоты content-div. Опять же, похоже, что недостающая часть - это способность реагировать на событие изменения размера.