CSS：重复背景，顶部而不是底部溢出答案

【问题标题】：CSS: repeating background with overflow on top instead of bottomCSS：重复背景，顶部而不是底部溢出
【发布时间】：2011-07-31 15:07:40
【问题描述】：

有没有办法让重复的背景“开始”固定在 div 的底部并在顶部溢出？（与默认相反）

展示我想要完成的工作的小例子。下图中的红线是几个 div 之间的（水平）边界。中间 div 用作上下 div 之间的过渡，具有单个不重复的图像。下部 div 的背景由带有纸孔的重复较暗图像组成，从而形成下面看到的纸边框。

现在上面的 div（包含相当大的内容）应该有一个从底部开始并向上重复的重复背景图像。这是为了保持孔之间的正确距离比，而不是在“纸边框”中以较小的距离甚至部分孔结束。

最好它应该与method 4 of equal height columns 兼容，但我认为那里没有问题。

【问题讨论】：

标签： html css

【解决方案1】：

只需确保将background-position: right bottom; 设置为顶部 div，背景图像应从底部开始并“溢出”顶部。

简写示例：

.my-div {
    background:#fff url(my-bg.png) right bottom repeat;
}

如果您想进一步探索，请提供一些参考资料：
http://reference.sitepoint.com/css/background-position

【讨论】：