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

Answer 2

Could setting background-position: fixed in your css help? Then your bottom div could move, but its background image would remain fixed in relation to the top of the page. As more of your repeating image was revealed, so more of your bottom image would be hidden.

This would comes under the heading of "offset the background image in the bottom div by a certain amount depending on the height of the content-div", rather than "the content div's height to be a multiple of 300px under all circumstances".

Answer 3

You could try adding an event listener to the div:

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

Answer 4

If nothing needs to match up at the top, position the repeating image at the bottom of the div (so the overflow will spill over the top). Like this:

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