Question

我无法确定解决方案。

我有一个带有重复背景图像的div，它在屏幕上是100％。所以我们说：

.services_wrap {
    width:100%;
    height:200px;
    background:url('../images/services_tile.png') repeat-x;
}

<div class="services_wrap">
    //Content
</div>

如何在屏幕调整大小时指定一个媒体查询来缩放整个div，就像普通div一样：

@media screen and (max-width: 650px) {

    /*Makes the logo shrink*/
    #header {
            height:auto;
    }
}

但如果我尝试使用.services_wrap，则不会发生任何事情。

我尝试过背景大小：没有运气的属性。

是否可以缩放重复图像？

Answer 1

使用background-size

div {
    background: url("//www.placehold.it/50x50") repeat-x;
}

@media screen and (max-width: 900px) {
    div {
        background-size: 25px;
    }
}

Demo

100％Div，重复背景图像媒体查询

1 个答案: