Cool effect if you have a good enough reason and a wide enough image.
HTML
<div class="wrapper">
<div class="sliding-background"> </div>
</div>
CSS
.wrapper {
overflow: hidden;
}
.sliding-background {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/sliding-background-wwf.jpg") repeat-x;
height: 560px; //height of the canvas
width: 5076px; //min. 3x width of image
animation: slide 60s linear infinite;
}
@keyframes slide{
0%{
transform: translate3d(0, 0, 0);
}
100%{
transform: translate3d(-1692px, 0, 0); //image is 1602 pixels wide x 500 pixels high
}
}
