背景图像通过背景位置淡入另一个

代码段：https : //jsfiddle.net/foy4m43j/

HTML：

<div id="background"></div>

CSS：

#background {
    background-image: url("http://i.imgur.com/hH9IWA0.png");
    background-position: 0 0;
    background-repeat: repeat;
    height: 100%;
    width: 100%;
    position: fixed;
}

从这里开始，我想使用background-position一种淡入淡出和新的颜色（黑色线条表示我们移动的方向）来产生这种效果：

图片示例（请原谅出口不良）：

是否可以通过jQuery或CSS？我正在努力解决如何使用background-position多个图像的问题。

到目前为止，这是我的糟糕尝试。我不明白为什么渐变会朝另一个方向移动，而且我不确定如何使黄色仅向右X轴重复：https : //jsfiddle.net/foy4m43j/1/

我希望我足够清楚。除了没有回应之外，我找不到其他类似的问题。