How to fill browser window with rotating backgroun

Question

I'm trying to figure out how to fill a browser window with a background image and have the image scale if the user adjusts the browser window screen.

Additionally I'd like to have the background image rotate among 3 to 5 different images.

An example of what I'm after can be seen here:

http://elegantthemes.com/preview/InStyle/

Answer 1

They are using jquery to do a cross fade between the images and text. Check out line 27

http://elegantthemes.com/preview/InStyle/wp-content/themes/InStyle/js/custom.js

I'm not going to cut and paste in the js code for this because it's a paid theme for word press. If you don't want to write it all yourself I suggest buying the theme as it does exactly what you want.

http://www.wpthemesnews.com/theme-releases/instyle-a-premium-wp-theme-from-elegantthemes/

Answer 2

The concept of changing backgrounds is simple. Here's a quick example i did changing backgrounds by changing classes of body.

var bg = ['img3', 'img1', 'img2'];
$.each(bg, function(index, ui) {
    setTimeout(function() {
        $('body').removeAttr('class').addClass(ui);
    }, 2000 * index)
});

check working example at http://jsfiddle.net/ewsQ7/