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

使用背景大小

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

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

Demo