When your website means business.

CSS, CSS3, Images | Type: CSSSliding Image Background

Cool effect if you have a good enough reason and a wide enough image.

<div class="wrapper">
<div class="sliding-background"> </div>

.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{
      transform: translate3d(0, 0, 0);
      transform: translate3d(-1692px, 0, 0); //image is 1602 pixels wide x 500 pixels high

We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
Cookies Notice