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

Question

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

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

Я пытался изменить размер содержимого 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, управляющему изменением размера контента в div содержимого, хотя это потенциально способ решения проблемы.

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

Answer 1

Другой подход заключается в вычислении стиля background-position для нижнего и верхнего DIV на основе размера содержимого DIV. Вы можете использовать отрицательные позиции для выравнивания нижней части одной верхней другой.

Еще один подход заключается в использовании многоуровневого подхода DIV, в котором верх, содержимое и низ - все дочерние элементы родительского DIV, который содержит фон.

Преимущество этих подходов состоит в том, что они не изменяют естественное отображение содержимого DIV просто для управления фоном.

Пример: http://bin.googlecode.com/svn/trunk/css/repeating-bg-content.html

Answer 2

Если ничто не должно совпадать в верхней части, поместите повторяющееся изображение в нижней части div (чтобы переполнение перетекло поверх). Как это:

div#repeating { background: transparent url('/path/to/image') repeat left bottom; }

Answer 3

Вы можете попробовать добавить прослушиватель событий в div:

        var div = document.getElementById("content");
        div.addEventListener("resize", adjustContentHeight, false);

Answer 4

Может ли настройка background-position: fixed в вашей помощи CSS?Тогда ваш нижний элемент div может двигаться, но его фоновое изображение останется фиксированным относительно верхней части страницы.Чем больше вашего повторяющегося изображения было обнаружено, тем больше вашего нижнего изображения было бы скрыто.

Это относится к заголовку «Сместить фоновое изображение в нижнем элементе на определенную величину в зависимости от высотыcontent-div ", а не" высота содержимого div, кратная 300px при любых обстоятельствах ".