Stop background images disappearing when switching tabs

user_12124974 0
Viewed 34

I have some code that cycles through some background jpeg images. It works fine when I am looking at the window, but the second I switch tabs or apps, the image that was last show stops working, in its place, I simply see the white background before it changes to the next along image. A refresh fixes the problem. Here's the associated code:

body{
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  width:100%;
  animation: animate 45s infinite;
  -webkit-animation: animate 45s infinite;
  -moz-animation:  animate 45s infinite; 
  -o-animation:   animate 45s infinite;   
}

@keyframes animate{
  
  0%{background-image: url('1.jpeg');}
  5%{background-image: url('1.jpeg');}
  /* ... and so on looping through other images before returning to image 1 */
  85%{background-image: url('7.jpeg');}
  90%{background-image: url('7.jpeg');}
  95%{background-image: url('7.jpeg');}
  100%{background-image: url('1.jpeg');}

}
css
1 Answers

Add the transform property to your element with fixed background image. You can have any set position.

body{
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  display: block;
  height: 100vh;
  width:100%;
  animation: animate 45s infinite;
  -webkit-animation: animate 45s infinite;
  -moz-animation:  animate 45s infinite; 
  transform: translate3d(0,0,0);
  -o-animation:   animate 45s infinite;   
}
user_162997150
Related