Connect repeating and non-repeating seamless backgrounds

Question

I have a 700x300 background that repeats easily inside the main content-div. Now I would like to add a div at the bottom of the content-div containing another background image that cannot be reproduced, easily connecting to the repeating background above it. Essentially, a non-repeating image will look like the end of the repeated image.

Due to the nature of the template, if the full height of 300px of the background image is not visible in the last repeat of the background content-div, the background in the div below will not be easy to connect. Basically, I need the content div height to be a multiple of 300 pixels under any circumstances. What is a good approach to this problem?

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

function adjustContentHeight()
{
    // Setting content div 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 is a way to respond to a resize event, but it doesn't look like something like that there . Also, suppose I don't have access to JS controlling the resizing of content in the content-div, although this is potentially a way to solve the problem.

Another potential solution I thought was to shift the background image in the bottom div by a certain amount depending on the height of the content div. Again, the missing part seems to be the ability to respond to a resize event.

Answer 1

background-position DIVs DIV. , .

DIV, , DIV, .

, DIV .

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

Answer 2

background-position: fixed css? div , . , .

" div -div", " div , 300 " ".

Answer 3

div:

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

Answer 4

, div ( ). :

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