如何让background在img标签的上面?

今天写了一个页面,客户要求在图片上面增加一个背景图片,刚开始感觉还挺不好写,遂百度之:

html结构

<div class="test">
    <img src="circle.jpg">
</div>

css代码

.test {
    background: url(abc.jpg) repeat;
    position: relative;
    width: 200px;
    background-size: cover;
}
.test img {
    width: 100%;
    display: block;
    position: absolute;
    z-index: -1;
}