將重復背景圖像與容器底部的非重復背景圖像對齊

Question

我有一個可變大小的容器，它有一個重復的背景圖塊，可以伸展以任何寬度填充容器。 我需要容器的高度，使其始終是1個瓷磚高度的倍數 - 這樣我就可以將容器的底部與'end'瓷磚無縫對齊，后者是以下容器的bg圖像。 我試圖用jQuery做，但我的代碼不工作...

注意：重復的背景必須從TOP開始，因為它上面有另一塊它連接起來（所以在這種情況下設置背景塊從底部重復的解決方案不適用 - 這只是在頂部）我需要javascript正常工作，而不是只更改CSS。

小提琴： http ： //jsfiddle.net/nRe7R/1/

這是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();

和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

我相信如果你將背景圖像設置為bottom ，它將向上重復。 不確定這是不是你想要的，但這是一個小提琴

#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

演示 （嘗試調整大小）

添加以下規則：

#container1 {
  background-size:center bottom;
}

#container2 {
  background-size:center top;
}

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