Responsive Animated Background in Bootstrap?

Question

After following the instructions here: https://davidwalsh.name/background-animation-css

I can make the picture move, but I cannot figure out how to make it responsive. Any ideas on how to make this possible? I have added following css code:

@keyframes animatedBackground{
  from {background-position: 0 0;}
  to {background-position: -1920px 0;}
}


#animate-area{ 
  width: 560px; 
  height: 400px; 
  background-image: url("images/japan.jpg");
  background-position: 0px 0px;
  background-repeat: repeat-x;

  animation: animatedBackground 40s linear infinite;
}

Answer 1

Within the demo, the width of <div id="animate-area"> is explicitly set to 560px. Try setting it to width: auto; . This should scale the div width to that of it's container/parent.