Html CSS3在同一行中使用背景图像和跨浏览器渐变

我试图将所有内容都放在

背景图像

声明中，以便我的背景重复工作。我的代码是这样的，但是背景是白色的

body {
height: 100%;
background-image:
    url("../img/bgpattern.png"),
    -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 83%, rgba(0,0,0,1) 100%),
    -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,1)), color-stop(14%, rgba(0,0,0,0)), color-stop(83%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,1))),
    -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 83%, rgba(0,0,0,1) 100%),
    -o-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 83%, rgba(0,0,0,1) 100%),
    -ms-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 83%, rgba(0,0,0,1) 100%),
    linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 83%, rgba(0,0,0,1) 100%),
    progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 ),
    url("../img/bg.jpg");

background-repeat: repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat;

---

}

如果我理解你想做什么，这里至少有几个例子（特别是Tamás Pap的答案，在每行添加两个图像，用逗号分隔），然后查看第二个例子。。是的，Tamás Pap的答案正是我想要的。我用指南针和SASS来做，谢谢。