How to make background move infinitely? - css

Question

Let's say I have a repeating background of pic.png, like so...
body {
background-image: url(pic.png);
}
I want to make it move seamlessly in a certain direction, say northeast at a given speed, infinitely. I've seen w3 schools do it with animate, but that gradually slows and speeds up, not to mention move back and forth.
One more thing, (i think it automatically does this but i'll explain it), when it moves, I don't want to see the emptiness of white space, I want to see the background repeat with it as it moves.

Answer 1

Weave: http://kodeweave.sourceforge.net/editor/#55eb58488c64b5c4ef5b25a64a8c4f3b
Simple! Setup your background and give it an animation property.
body {
background-image: url("http://img15.deviantart.net/cafe/i/2012/085/2/8/orange_stripe_background_by_sonnywolfie-d4u0e93.png");
background-size: 261px;
animation: moveIt 10s linear infinite;
}
animation: moveIt 10s linear infinite;
I named my keyframe function moveIt.
The delay of the function is 10 seconds.
There are many values you can pass for the animation-timing-function I just set mine to linear so my animation stays steady. Thus doesn't speed up or slow down at the end.
Then in your keyframe function you give it a name and set where and how
Now keyframe functions work by passing to, from or either percents %.
In this case I'm using to and from although 0% and 100% would work perfectly fine as well.
#keyframes moveIt {
from {background-position: bottom left;}
to {background-position: top right;}
}
NOTE: My weave uses Prefix-free that way you don't have to worry about vendor prefix's. However there is also Autoprefixer too which you may want to consider.
body {
background-image: url("http://img15.deviantart.net/cafe/i/2012/085/2/8/orange_stripe_background_by_sonnywolfie-d4u0e93.png");
background-size: 261px;
animation: moveIt 10s linear infinite;
}
#keyframes moveIt {
from {background-position: bottom left;}
to {background-position: top right;}
}

Answer 2

What you need is basically what you linked. You'll need a pattern image and then make the infinite animation, but move the background as many pixels as the dimentions of the image at keyframe 100%.
If your image is 32x32px and you want it to move up and right:
#keyframes mymove {
100% {background-position: 32px -32px;}
}
You will also want to set the easing to linear to prevent the deceleration:
animation-timing-function: linear;