javascript - 无缝连接可重复和不可重复的背景

Question

我有一个 700x300 的背景在主要内容 div 中无缝重复。现在，我想在 content-div 的底部附加一个 div，其中包含一个不可重复的不同背景图像，并与其上方的可重复背景无缝连接。从本质上讲，不可重复图像看起来就像可重复图像的最后一部分。

由于图案的性质，除非背景图像的完整 300 像素高度在内容 div 背景的最后一次重复中可见，否则下方 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 大小调整事件的方法，但是 doesn't seem to be such a thing .另外，请假设我无法访问控制 content-div 中内容大小调整的 JS，尽管这可能是解决问题的一种方法。

我正在考虑的另一个可能的解决方案是根据 content-div 的高度将底部 div 中的背景图像偏移一定量。同样，缺少的部分似乎是响应调整大小事件的能力。

Answer 1

另一种方法是根据内容 DIV 的大小计算底部和顶部 DIV 的 background-position 样式。您可以使用负数位置将一个的底部与另一个的顶部对齐。

另一种方法是使用分层 DIV 方法，其中顶部、内容和底部都是包含背景的父 DIV 的子项。

这些方法的好处是它不会仅仅为了管理背景而改变内容 DIV 的自然呈现。

示例:http://bin.googlecode.com/svn/trunk/css/repeating-bg-content.html