Фон-обесцвечивается изображение в другой через фона позиции

Question

фрагмент кода: 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/

Надеюсь, я достаточно ясен. Я не могу найти никаких других вопросов, подобных тем, у кого не было ответа.

Answer 1

Вы можете использовать градиент CSS. До сих пор лучшим решением, и это легко сделать: www.colorzilla.com