title: Using a JavaScript function with CSS via <style>
body: <p>I am working on a simple slideshow. I am using Javascript for the process of the slideshow and CSS for display of it. For some reason the CSS shows the first image perfectly but the JavaScript function is not engaging with the CSS to change the images. Suggestions?</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;body&gt;
         &lt;style scoped id="slider"&gt;
         html{
              background: url('Africa Twin Mountainside.jpg') no-repeat center              center fixed;
              background-size: cover;
              -webkit-background-size: cover;
              -moz-background-size: cover;
              -o-background-size: cover;
              } 
          &lt;/style&gt;
  
  
  
  
              &lt;script type="text/javascript"&gt;
              var images = [
              "Africa Twin Mountainside.jpg",
              "FZ-10.jpg",
              "GSXR track.jpg",
              "Pioneer 1k mountain.jpg",
              "Raptor sand.jpg"
              ];
  
  
              var step = 0;
              function slideit(){
              var imageUrl = images[step];
              document.getElementById('slider').src = background;
              step++;
              if(step&gt;=images.length)
              step=0;
              setTimeout("slideit()", 1000);                
              }
              slideit(); 
              &lt;/script&gt; 
     &lt;/body&gt;
  </code></pre>