javascript - 将重复的背景图像与容器底部的非重复图像对齐

Question

我有一个可变大小的容器，它有一个重复的背景图 block ，可以拉伸(stretch)以填充任何宽度的容器。我需要容器的高度始终是 1 个图 block 高度的倍数 - 这样我就可以将容器底部与“结束”图 block 无缝对齐，该图 block 是以下容器的背景图像. 我正在尝试使用 jQuery 来实现，但我的代码无法正常工作...

注意:重复背景必须从顶部开始，因为上面有另一 block 它连接在一起(因此将背景图 block 设置为从底部重复的解决方案在这种情况下不适用 - 这只会中断它在顶部) 我需要 javascript 才能正常工作，而不是只更改 CSS。

fiddle :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 它会重复向上。不确定这是否是您想要的，但这是一个 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;
}