How do I add a cycle style repeating image phase background to my website?

The question title says it all, I am not sure how to organize it in to my websites HTML due to the fixed menu bar, and its over all build. So to say, I want my website to have multiple backgrounds that fade in and out. I intend on adding more backgrounds over time. What I listed below is what I've been attempting to work with. I'll check back in an hour, thanks in advance.

http://www.famebyname.us/ - My website.

   body {
  width: 400px;
  height: 400px;
}
/* set `#slideshow` parent background color */
.slideshow {
  background: #000;
  display:block;
  width:inherit;
  height:inherit;
}
#slideshow {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.0;
  background-color: #000;
  /* 
     set background images as `url(/path/to/image)` here, 
     separated by commas 
  */
  background-image: url("http://lorempixel.com/400/400/cats/?1"), 
    url("http://lorempixel.com/400/400/animals/?2"), 
    url("http://lorempixel.com/400/400/nature/?3"), 
    url("http://lorempixel.com/400/400/technics/?4"), 
    url("http://lorempixel.com/400/400/city/?5");
  background-size: cover, 0px, 0px, 0px;
/* set transtitions at 3000ms 
  -webkit-transition: background-image 3000ms linear;
  -moz-transition: background-image 3000ms linear;
  -ms-transition: background-image 3000ms linear;
  -o-transition: background-image 3000ms linear;
  transition: background-image 3000ms linear;
    */
}   

Javascript below.

    $(function() {
  $.fx.interval = 0;
  (function cycleBgImage(elem, bgimg) {
    // `elem`:`#slideshow`
    // set, reset, delay to `1000` after background image reset
    elem.css("backgroundImage", bgimg)
      // fade in background image
      .fadeTo(3000, 1, "linear", function() {
        // fade in background image
        $(this).delay(3000, "fx").fadeTo(3000, 0, "linear", function() {
          // split background image string at comma , creating array
          var img = $(this).css("backgroundImage").split(","),
            // concat first background image to `img` array,
            // remove first background image from `img` array
            bgimg = img.concat(img[0]).splice(1).join(",");
          // recursively call `cycleBgImage`
          cycleBgImage(elem, bgimg);
        });
      });
  }($("#slideshow")));
});    

The division script, which I'm not sure I have a use for unless I make my whole website one large div which seems pointless.

 <div class="slideshow">