css - 具有重复背景图像媒体查询的 100% Div

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 尝试这个，什么都不会发生。

我试过 background-size: 没有运气的属性。

是否可以缩放重复图像？

Answer 1

采用background-size

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

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

演示