设置背景图像的比例位置

Question

仅供参考，请参阅this website。

我想使用faux columns method来确保#secondary边栏的蓝色背景延伸到其父级的底部：#main。但是，当我使用Firefox开发人员工具响应视图，并减少视口的宽度，＃secondary的宽度变成％，但＃main的背景图像保持不变，因此背景图像的蓝色部分渗入到＃主要内容区域。

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

我知道你可以将背景位置设置为％，但是这匹配图像左侧的特定点x％in和其父点左侧的点x％in，所以它始终停留无论你指定的是什么％，都处于相同的位置。

Answer 1

袋鼠写，解决办法是设置：

background-size:contain; 

为#main。

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