title: Trying to make multiple background images cycle through a slideshow with CSS and JQUERY
body: <p>I've placed three background images in a div. I'm trying to make all three of them cycle through on a timer that fades in and out. I've actually found similar quesitons on here, but I cannot get them to work. Anyway, here's the relevant code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="slideshow"&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#slideshow{
  position:relative;
  top:0;
  width:100%;
  height:635px;
  background:
      url("car4.jpg"),
      url("city.jpg"),
      url("host3.jpg");
  background-repeat:no-repeat;
  background-size:100%;
  }
  </code></pre>
  
  <p>I'm hoping to do this in <code>CSS</code>, but I'm guessing it requires <code>JQUERY</code>; which I don't have much experience in. But that's OK.</p>
  
  <p>I'd really appreciate any help. Let me know if I can give you any more information. Thank you.</p>
  
  <p>*** I've tried css animations but I didn't get the results. Here's what I changed it to:</p>
  
  <pre><code>#slideshow{
     position:relative;
     top:0;
     width:100%;
     height:635px;
     background:url("car4.jpg");
     background-repeat:no-repeat;
     background-size:100%;
     animation-name: one;
     animation-duration: 4s;
  }
  @keyframes one {
  from {background: url("car4.jpg");}
  to {background: url("city.jpg");}
  }
  </code></pre>
  
  <p>This looks correct, but it still only showing the original image "car4.jpg"
  Thanks</p>