身体的响应式可重复背景图像，更改媒体查询以覆盖答案

【问题标题】：Responsive repeatable background image for body, change in media query to cover身体的响应式可重复背景图像，更改媒体查询以覆盖
【发布时间】：2013-08-02 01:34:07
【问题描述】：

我为我的页面使用了无网格 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;
}
}

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

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

如何正确地将图像制作为可重复图像？它可以固定，但应该总是看起来像图片，但如果尺寸较小，则左右没有空格

非常感谢！

【问题讨论】：

我不认为你可以像流体布局那样重新调整图像大小......至少我不知道......
谢谢，我知道这很难，但我基本上需要上面的背景作为响应式，以便在较小的屏幕上不会显示左右的空间。有没有其他办法？
@Akki619 错了。看我的帖子。
@owl 你能不能试试 Barm 解决方案，如果它有效，那就太好了！
@BramVanroy 您能否为此设置小提琴。这对每个人都有帮助。

标签： css media-queries

【解决方案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 展示了它的作用。

【讨论】：

【解决方案2】：

如果您的设计是流畅的，您可以定位较低的分辨率，例如

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

宽度需要根据业务需要进行管理。

【讨论】：

【解决方案3】：

使用此代码来解决您的问题。一旦我也遇到了同样的问题，这段代码对我有帮助，我希望它也能对你有所帮助。这肯定会奏效。

 @media only screen and(max-width:600px){
       body{
            background-image: url(satyam01.jpg);
           background-size: cover;
            background-position: center;
        }
    }

【讨论】：