Connecting repeatable and non-repeatble backgrounds without a seam

Question

I have a 700x300 background repeating seamlessly inside of the main content-div. Now I'd like to attach a div at the bottom of the content-div, containing a different background image that isn't repeatable, connecting seamlessly with the repeatable background above it. Essentially, the non-repeatable image will look like the end piece of the repeatable image.

Due to the nature of the pattern, unless the full 300px height of the background image is visible in the last repeat of the content-div's backround, the background in the div below won't seamlessly connect. Basically, I need the content div's height to be a multiple of 300px under all circumstances. What's a good approach to this sort of problem?

I've tried resizing the content-div on loading the page, but this only works as long as the content div doesn't contain any resizing, dynamic content, which is not my case:

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);

What I'm looking for there is a way to respond to a div resizing event, but there doesn't seem to be such a thing. Also, please assume I have no access to the JS controlling the resizing of content in the content-div, though this is potentially a way of solving the problem.

Another potential solution I was thinking off was to offset the background image in the bottom div by a certain amount depending on the height of the content-div. Again, the missing piece seems to be the ability to respond to a resize event.

Answer 1

Another approach is to calculate the background-position style for the bottom and top DIVs based on the size of the content DIV. You can use negative positions to align the bottom of one to the top of another.

Yet another approach is to use a layered DIV approach in which the top, content and bottom are all children of a parent DIV that contains the background.

The benefit of these approaches is that it doesn't change the natural rendering of the content DIV simply for managing the background.

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