HTML/jQuery Live Background Color

Question 1

     $(function () {
       function bgtx() {
           $("body").css({
               "transition": "background 2500ms ease-out",
                   "background": "100% 100% #" 
                   + String(Array(7)).replace(/,/g, function () {
                   var g = ("271314020a9b8c7d54da816e5f403221abcde0");
                   return g.charAt(Math.floor(Math.random() * g.length))
               })
           }).animate({
               top: "0"
           }, 2500, function () {
               bgtx()
           })
       };
       $.when(bgtx())
     })

jsfiddle http://jsfiddle.net/guest271314/c7P4L/

Question 2

The easiest way I can think of to do this is to construct an array, put come colors into it and have another array that contains sources to images. I don't believe that this set-up will get you the best possible result but maybe it'll help you get there. I'd want you to take this with a grain of salt and apply your context to this solution.

First, in your CSS file:

.color-bg {
  background-color: #eee;
}
.img-bg {
  background: url(myImage.img);
  // add some more properties to make it behave how you want
}

Now your HTML, based on this style would have to be something like:

<!-- Put all your header stuff up here -->
<script src="js/background-changer.js"></script>
<body>
<p> Wow look at all this content!</p>
</body>

In our background-changer.js file:

$(document).ready(function() {
    var myColors = ["red","green","blue"]
    var myURLs = ["path/1/image.jpg","another/path/to/img.jpg"];
    for (color in myColors) {
        $('body').attr('class', 'color-bg').delay(6000).css(
                 'background-color', color);
    }
    for (img_url in myURLs) {
        $('body').attr('class', 'img-bg').delay(1000).css(
                 'background-image', 'url(img_url)'); 
    }
 });

This should get you boiler-plated so it behaves to your specifications.

Question 3

You can use one JQuery plugin, for example here you can find some of them http://www.jquery4u.com/plugins/responsive-fullscreen-background-image-plugins/

If don't want a plugin, you need to create a div (or other) and put it with absolute position back other elements in the page. Then play with js to fadeIn/fadeOut inside images (maybe add to img tag an attribute data-bgcolor where put the color matched) .

Basically is how to build a slideshow.