CSS: Scrolling Background -

CSS: Scrolling Background -

i have been using this site template page having difficulty changing background image. have recreated background on jsfiddle. current background works because top has single color , sides create image continuous.

here relevant css code:

0% { -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -moz-transform: translate3d(-2250px, 0, 0); -webkit-transform: translate3d(-2250px, 0, 0); -o-transform: translate3d(-2250px, 0, 0); -ms-transform: translate3d(-2250px, 0, 0); transform: translate3d(-2250px, 0, 0); }

is there way create background scrolls right , 1 time reaches end, scrolls left? hard create image "continuous" when scrolls.

this same functionality 1 of first scripts ever, leveraging right css property.

class="snippet-code-css lang-css prettyprint-override">.wrapper { width: 100%; height: 400px; text-align: right; overflow: hidden; } .marquee { -webkit-animation: rightleft 20s linear infinite; height: 100%; display: block; position: relative; } @-webkit-keyframes rightleft { 0% { right: 0; } 50% { right: 80%; } 100% { right: 0; } } class="snippet-code-html lang-html prettyprint-override"><div class="wrapper"> <img class="marquee" src="http://html5up.net/uploads/demos/aerial/css/images/bg.jpg" /> </div>

css