我想水平重复我的图像。但是，它没有重复
我的index.html页面

body {
  margin: 0;
  background-image: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);
  overflow: hidden;
  /** Scroll bar right side in your screen **/
}

.night {
  height: 80vh;
  width: 70vw;
  border: 1px solid black;
  margin: 5rem auto;
  background: url(http://placekitten.com/5/5);
  background-size: cover;
  position: relative;
  box-shadow: 1px 2px 60px rgba(0, 0, 0, 0.4);
  overflow-x: hidden;
}

.surface {
  height: 140px;
  width: 200px; /* 500px; */
  background: url(http://placekitten.com/10/10);
  display: block;
  position: absolute;
  bottom: 0%;
  left: 0%;
  background-repeat: repeat-x;
  /*animation: moveRight 6s linear infinite;*/
}

.car {
  position: absolute;
  bottom: 8%;
}

<div class="night">
  <div class="surface"></div>

  <div class="car">
    <img src="http://placekitten.com/100/75" alt="Car">
  </div>
</div>

这是它当前的外观

出了什么问题？我检查了w3schools上的文章，但正如我所看到的，没有语法错误。
正确图像的外观