Using css3 how i can blur a single background-image when i’m use multiple background-image?

Using css3 how i can blur a single background-image when i am use multiple background-image?
I have tried the below css but it did not work.

#example1 {
background-image: url(images/img_flwr.gif), url(images/paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}

.fading {
height:200px;
background: url(images/img_flwr.gif) no-repeat;
}
@keyframes fading {
0%   { background: black; filter: blur(5px);}
33%  { background: red; filter: blur(5px);}
66%  { background: blue; filter: blur(5px);}
100% { background: green; }
}

@-webkit-keyframes fading {
0%   { background: black; filter: blur(5px);}
33%  { background: red; filter: blur(5px);}
66%  { background: blue; filter: blur(5px);}
100% { background: green; }
}    


Source: css3

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.