設置背景圖像的比例位置

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+支持。