css - 主体的响应式可重复背景图像，媒体查询更改以覆盖

Question

我正在为我的页面使用无网格 CSS 框架。

Body 元素用作包装器，我有该包装器的背景图像，它向下重复。

现在的问题是，让这个图像响应。这是CSS

html {
    height: 100%;
    font-size: 100%;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    background-color:#5FB7C0;
}
body {
    margin: 0 auto;
    min-height: 100%;
    max-width:960px;
    width:90%;
    color:#fff;
    background: url('../img/background.jpeg') repeat-y; 
}

背景 jpeg 为 960 像素宽。我想做一个媒体查询，在缩小时将背景图像作为封面。我也更改了相同的图像但双倍高度，因此背景不会按比例放大。

@media only screen and (max-width: 1100px) { 
body {
    background: url('../img/mobilebg.jpeg');    
    background-size:cover;
}
}

但是现在当我缩小时，如果高度大于宽度，背景图像不会缩小到更小的尺寸。

问题是，cover 属性看起来高度等于图像，但我需要它看起来宽度相等。还有一个重复 y 的背景尺寸封面。

如何使图像正确地成为可重复的？它可以固定，但应该始终看起来像图片，但如果尺寸较小，则没有左右空格

非常感谢!

Answer 1

试试这个(我使用了 959 像素，因为如果图像是 960 像素，1100 像素就没有意义)

@media only screen and (max-width: 959px) { 
body {   
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
}
}

Fiddle这展示了它的作用。