Q:

Infinite Horizontal Scrolling Pattern/Images with fixed position

Ive tried to have a function (see below) for Infinite Horizontal Scrolling Pattern/Images with fixed position.  The Infinite Scrolling function works, but my only problem is the fixed position. 
I wanted to give that infinite Horizontal Scrolling Image a fixed position, meaning that if i scroll down the website, the image should stay on position and should scroll horizontaly at the same time. 
I've tried to add a "position:fixed;" or "background-attachment: fixed" under the css class selectors but it does not work, instead of functioning, the image disappear. 
Url: https://codepen.io/Founts/pen/dXkyAa

.hero {
  height: 300px;
}

.hero-img {
  background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/50859/bit-tile-blue.gif) repeat-x 50% 0;
  animation: infinite-shift-left 5000s linear;
  
}

@keyframes infinite-shift-left {
  0% {
    background-position: 50000px;
  }
  100% {
    background-position: 0;
  }
}
<div class="hero hero-img">
</div>

A:

Since position: fixed; removes the element from the document flow, the <div> does not automatically fill the width of the screen.  To fix this, give it a width:
.hero {
  height: 300px;
  width: 100%;
  position: fixed;
}

