Breaking News: Grepper is joining You.com. Read the official announcement!

how to make infinite gif images background in css

Worrisome Whale answered on October 31, 2024 Popularity 3/10 Helpfulness 1/10

answer how to make infinite gif images background in css

how to make infinite gif images background in css

Comment

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#animatedBackground {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url("http://twibbon.s3.amazonaws.com/238/63bb30c8-2649-465e-9df1-ab2f8e5f7ecc.jpg");
  background-repeat: repeat;
  background-position: 0 0;
  background-size: auto 100%;
/*adjust s value for speed*/
  animation: animatedBackground 500s linear infinite;
}

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
/*use negative width if you want it to flow right to left else and positive for left to right*/
  to {
    background-position: -10000px 0;
  }
}
<div id="animatedBackground">
</div>

Popularity 3/10 Helpfulness 1/10 Language css

Source: stackoverflow.com

Tags: background css gif infinite

Link to this answer
Share Copy Link