将响应式背景图像添加到无响应的网站

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;
}

＆＃39;盖＆＃39;将根据容器的大小
对背景图像进行重新缩放 ＆＃39;固定＆＃39;当你向下滚动时，会使背景图像的位置保持固定