小编Sti*_*ler的帖子

我有一个700x300的背景,在主内容div中无缝重复.现在我想在content-div的底部附加一个div,其中包含一个不可重复的不同背景图像,与上面的可重复背景无缝连接.基本上,不可重复的图像看起来像可重复图像的最终部分.

由于图案的性质,除非在content-div的背景的最后一次重复中看到背景图像的完整300px高度,否则下面div中的背景将无法无缝连接.基本上,我需要内容div的高度在所有情况下都是300px的倍数.对这类问题有什么好处？

我已经尝试在加载页面时调整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 resizing事件,但似乎没有这样的事情.另外,请假设我无法访问控制content-div中内容大小调整的JS,尽管这可能是解决问题的一种方法.

我想到的另一个可能的解决方案是根据content-div的高度将底部div中的背景图像偏移一定量.同样,缺失的部分似乎是响应resize事件的能力.