Align a repeating background image with a non-repeating one at the bottom of the container

Question

I have a variable size container that has a repeating background slab that stretches to fill a container of any width. I need the height of the container to be such that it is always a multiple of the height of 1 tile - this is so that I can easily align the bottom of the container with the “end” tile, which is the bg image of the next container, I'm trying to do this with jQuery, but my code is not working ...

NOTE. A repeating background MUST start with TOP, as there is one more fragment above which it connects (so the decision to set a background fragment to repeat from below is not applicable in this case - it just breaks at the top) I need javascript to work correctly, and not just CSS.

Fiddle: http://jsfiddle.net/nRe7R/1/

Here is the JS:

function seamlessBottomBg() {
    var container = $('#container1');
    var bgTileAspectRatio = 65/1163;
    var tileWidth = container.outerWidth();
    var tileHeight = tileWidth * bgTileAspectRatio;
    //calculate how many px high the 'cutoff' last bg tile is, if there is a cutoff part
    var cutOffTileHeight = container.outerHeight() % tileHeight;
    if(cutOffTileHeight !== 0) {
    container.css('padding-bottom', tileHeight-cutOffTileHeight+1+'px'); 
        }
    }
seamlessBottomBg();

and CSS:

#container1 {
    background-size: contain;
    background-image: url(http://img.photobucket.com/albums/v488/fishygirl/paper-repeating_zps52e98fe2.jpg);
    background-repeat: repeat-y;
    width: 80%;
    margin: 0 auto;
    padding: 3em 10% 0;
    max-width: 1200px;
}
#container2 {
    background-size: contain;
    background-image: url(http://img.photobucket.com/albums/v488/fishygirl/paper-bg-bottom_zps441e1bc3.jpg);
    background-repeat: no-repeat;
    width: 80%;
    margin: 0 auto;
    padding: 3em 10% 0;
    max-width: 1200px;
}

Answer 1

I believe that if you set the background image to bottom, it will repeat up. Not sure if this is what you want, but here is fiddle

#container1 {
    background-size: contain;
    background-image: url(http://img.photobucket.com/albums/v488/fishygirl/paper-repeating_zps52e98fe2.jpg);
    background-repeat: repeat-y;
    background-position: bottom;
    width: 80%;
    margin: 0 auto;
    padding: 3em 10% 0;
    max-width: 1200px;
}

Answer 2

DEMO (try resizing)

Add the following rules:

#container1 {
  background-size:center bottom;
}

#container2 {
  background-size:center top;
}

@media (min-width:1024px) { /* 1024px is based on the image width */
    #container2 {
        background-size: cover;
    }
}