向無響應的網站添加響應的背景圖片

Question

我需要的最好的例子是http://shutterstock.com上的搜索欄後面的圖片。嘗試取消縮放（ctrl和 - 在Chrome上）;網站的其餘部分將縮小;圖像本身將保持相同的大小，只會隨着高度降低而被裁剪。

基本上，我需要背景圖像是響應和全寬否則無響應和960px主題。

到目前爲止，這給我一個很頭疼的問題;我無法弄清楚如何去做。

任何想法？

Answer 1

我認爲您正在尋找background-size。僅供參考，這不適用於IE8和以下我相信。

.your-class { 
    background:url('images/yourimage.jpg'); 
    background-size:cover; 
} 

Answer 2

body { 
background-image: url(blah.jpg); 
background-size: cover; 
background-repeat: no-repeat; 
background-attachment: fixed; 
} 

「罩」將根據容器的大小
「修復」的背景圖像的重新調整將使背景圖像positton保持固定，當u向下滾動