<div id="marquee"></div>
<div id="marquee" class="reverse"></div>

body{ margin: 0; padding: 0; background: #000; }

#marquee{
  background-image: url(https://s3.amazonaws.com/f.cl.ly/items/0B021k3y023m2l1R3F1C/_about.png?v=555b59f0);
  background-color: yellow;
  background-size: auto 100%;
  background-position: 0 0;
  background-repeat: repeat-x;
  display: block;
  width: 100vw;
  height: 60px;
  animation: animatedBackground 5s linear infinite;
  position: fixed;
  transition-duration:0.5s;
  transform-origin: 50% 0;
  z-index: 2;
  box-shadow: 0px 0px 20px #000;
}
#marquee.reverse{
  animation: reverseAnimatedBackground 5s linear infinite;
  background-position: top 0 right 0;
  background-image: url("https://s3.amazonaws.com/f.cl.ly/items/2B3z322C3s2M1C0S1b1l/_residents.png");
  top: 60px;
  background-color: blue;
  z-index: 1;
}

#marquee:hover{
  transform: scale(1.25);
}

/* not that responsive, required to know the image size and set and animation based on it */
@keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 853px 0; }
}
@keyframes reverseAnimatedBackground {
	from { background-position: 0 0; }
	to { background-position: -1094px 0; }
}