title: stop background repeating with CSS
body: <p>I have a set a <code>&lt;li&gt;</code> to my background and added keyframes to cycle through the images. My goal is to use these to create a lean looped animation, but I can't stop the background image from repeating.</p>
  
  <p>There is one image that I cant control, while the one beneath is sized and positioned correctly.</p>
  
  <p>Any help would be appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.cb-slideshow span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size:cover;
    background-position: 50% 50%;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 8s linear infinite 0s;
    background-repeat: no-repeat;
  }
  
  .cb-slideshow li:nth-child(1) span { 
    background-image: url(../images/1.jpg) 
  }
  .cb-slideshow li:nth-child(2) span { 
    background-image: url(../images/2.jpg);
    animation-delay: 1s; 
  }
  .cb-slideshow li:nth-child(3) span { 
    background-image: url(../images/3.jpg);
    animation-delay: 2s; 
  }
  .cb-slideshow li:nth-child(4) span { 
    background-image: url(../images/4.jpg);
    animation-delay: 3s; 
  }
  .cb-slideshow li:nth-child(5) span { 
    background-image: url(../images/5.jpg);
    animation-delay: 4s; 
  }
  .cb-slideshow li:nth-child(6) span { 
    background-image: url(../images/6.jpg);
    animation-delay: 5s; 
  }
  .cb-slideshow li:nth-child(7) span { 
    background-image: url(../images/7.jpg);
    animation-delay: 6s; 
  }
  .cb-slideshow li:nth-child(8) span { 
    background-image: url(../images/8.jpg);
    animation-delay: 7s; 
  }
  
  @keyframes imageAnimation { 
    0% { opacity: 0 }
    0.1% { opacity: 1 } 
    12.5% { opacity: 1 }
    12.6% { opacity: 0 }
    100% { opacity: 0 }
  }
  
  .no-cssanimations .cb-slideshow li span{
    opacity: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="cb-slideshow"&gt;
      &lt;li&gt;
          &lt;span&gt;&lt;img src="Images/1.jpg" &gt;&lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;span&gt;&lt;img src="Images/2.jpg" &gt;&lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;span&gt;&lt;img src="Images/3.jpg" &gt;&lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;span&gt;&lt;img src="Images/4.jpg" &gt;&lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;span&gt;&lt;img src="Images/5.jpg" &gt;&lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;span&gt;&lt;img src="Images/6.jpg" &gt;&lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;span&gt;&lt;img src="Images/7.jpg" &gt;&lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;span&gt;&lt;img src="Images/8.jpg" &gt;&lt;/span&gt;
      &lt;/li&gt;                                  
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>