设置背景图像位置以进行缩放

Question

供参考，请参阅this website。

我想使用faux columns method来确保#secondary侧边栏的蓝色背景延伸到其父级的底部：#main。

但是，当我使用Firefox开发者工具响应视图并减小视口宽度时，＃secondary的宽度变为％，但#main的背景图像保持固定，因此背景图像的蓝色部分会渗入#primary内容区。

我曾经读过一篇文章，其中某人使用了虚拟列方法，并且能够在缩小视口时将背景图像的位置设置为缩小，以便背景图像的颜色变化始终与#secondary侧边栏的右侧。

我知道您可以将背景位置设置为％，但这会匹配图像左侧的特定点x％in，其父节点左侧的点为x％，因此它始终保持在无论你指定的是什么百分比，都是相同的位置。

Answer 1

正如袋鼠所写，解决方案是设置：

background-size:contain;

代表#main。

IE9 +，Firefox 4 +，Opera，Chrome和Safari 5 +支持此CSS属性。