0

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

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

现在的问题是，要使此图像具有响应性。这是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 的背景尺寸封面。

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

非常感谢！

4

3 回答 3

3

试试这个（我使用 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;
}
}

提琴展示了它的作用。

于 2013-08-01T08:47:14.223 回答
0

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

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

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

于 2013-08-01T08:49:38.830 回答
0

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

 @media only screen and(max-width:600px){
       body{
            background-image: url(satyam01.jpg);
           background-size: cover;
            background-position: center;
        }
    }
于 2017-10-02T11:24:36.000 回答