title: Using a responsive slideshow as full-sized webpage background via html/javascript
body: <p>guys!</p>
  
  <p>I am working on a project for my portfolio that I think would be absolutely sweet with the following feature: A responsive slideshow, fit to the browser that is made of clickable images that link you to more information about the specific product. </p>
  
  <p>This idea was inspired by Triumph's home page (as of 2/16/17) here: <a href="http://www.triumphmotorcycles.com/" rel="nofollow noreferrer">http://www.triumphmotorcycles.com/</a></p>
  
  <p>With that being said, I have selected several nice images that will fit the entire browser (though they are all not the same size). I used them to create a slideshow with Javascript (I want to use an array for the images just to get used to good habit) and set the height to 400x400px just to get a feel for creating the slideshow. It works great! Now it it is time to get this slideshow to fit the browser nice and neatly like Triumph's site! :)</p>
  
  <p><a href="https://i.stack.imgur.com/4VQqj.jpg" rel="nofollow noreferrer">Here is a screenshot of their homepage</a>
  Here is my code:</p>
  
  <pre><code>            &lt;script type="text/javascript"&gt;
              var image1=new Image();
              image1.src="Africa Twin Mountainside.jpg";
              var image2=new Image();
              image2.src="FZ-10.jpg";
              var image3=new Image();
              image3.src="GSXR track.jpg";
              var image4=new Image();
              image4.src="Pioneer 1k mountain.jpg";
              var image5=new Image();
              image5.src="Raptor sand.jpg";
          &lt;/script&gt;           
  
  
  
  
  
          &lt;img src="Africa Twin Mountainside.jpg" name="slide" width="400" height="400" alt=""/&gt;
  
          &lt;script type="text/javascript"&gt;
              var step=1;
              function slideit(){
              document.images.slide.src=eval("image"+step+".src");
              if(step&lt;5)
                  step++;
              else
                  step=1;
              setTimeout("slideit()", 2500);                
               }
              slideit();            
          &lt;/script&gt;
  </code></pre>
  
  <p>My current objective is to fit the images responsively to the browser window. To create a non scrolling, nice, slideshow background. Any help with fitting this to the browser window would be greatly appreciated!</p>
  
  <p>Cheers from Texas! :P</p>