Css 在梯度上使用背景图像

我试图实现的是，我在div背景上有梯度，我试图在梯度上添加一个背景图像（图像只是一个图案），但要么只应用梯度，要么只应用图案，而不是两者 我使用以下代码获得白色背景：

 #box{
    padding:50px;
    background:linear-gradient(45deg, #A50F06 0%, #51A351 100%) repeat scroll 0% 0% transparent url('bs-docs-masthead-pattern.png') repeat scroll center center transparent;
    } 

仅适用于此的渐变：

#box{
background:linear-gradient(45deg, #A50F06 0%, #51A351 100%) repeat scroll 0% 0% 
}
 #box:after{
 background: transparent url('pattern.png') repeat scroll center center transparent;
}

---

我做错了什么？

如下更新您的CSS

 #box{
  background:url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSXwTmM2R_vmBHFpn720_8bGOaegnP5Kawh0wb4JggN5rUALGwGvw') no-repeat center center, linear-gradient(45deg, #A50F06 0%, #51A351 100%) repeat scroll 0% 0%;
  height:500px;
   }

在伪元素中添加

内容：

*{
保证金：0；
填充：0；
}
html，
身体{
宽度：100%；
身高：100%；
}
#盒子{
背景：线性梯度（45度，#A50F06 0%，#51A351 100%）重复滚动0%0%；
宽度：100%；
身高：100%；
}
#盒子：：之后{
内容：“；
背景：url（'http://s28.postimg.org/rfznph7ul/pattern.png');
宽度：100%；
身高：100%；
显示：块；
}

---

多个背景图像，需要用逗号分隔，堆叠顺序很重要。-可能是重复的不它不工作。。。这是我的图片的链接，你能试一试吗（我现在真的很烦），还有你说的关于添加

内容的事情：“

我们为什么需要这样做？链接：更新了您的图像正在工作的代码片段请检查我的答案@azazelromanYes它正在工作：）只需一个简单的问题就可以了，而无需设置

html和正文的样式
？我的意思是我只需要申请div，所以。。。实际上，我使用的是引导框架，向主体添加样式可能会弄糟。我刚刚添加了它，因此div会占据整个高度：）如果您使用的框架没有样式，则没有必要为
主体
和
html