Наверно я совсем сдурел.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
border: none;
}
html{
height: 100%;
}
body{
min-height: 100%;
background: url(http://imgs.su/tmp/1292024913.jpg) no-repeat center;
background-size: cover;
}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var delay = 3000;
var duration = 2000;
var backgrounds = ['http://imgs.su/tmp/1292024913.jpg',
'http://gallery.ykt.ru/galleries/tf2/2012/06/1077057_0.jpg',
'http://www.wallgrad.ru/_ph/39/251576366.jpg',
'http://yawall.ru/images/Abstrakciya-oboi-dlya-rabochego-stola-izobrajeniya/1920x1080/50459-Golubovatiy-fon-s-beloy-izognctoy-liniey-1920x1080.jpg'];
var $background = $('<div/>').css({position: 'fixed', zIndex: -1, top: 0, left: 0, right: 0, bottom: 0});
$.each(backgrounds, function(index, item){
var $image = $('<img/>').css({position: 'absolute'}).appendTo($background);
if (index > 0) {
$image.css({opacity: 0});
}
$image.on('load', function(){
var complete = true;
$(this).data('complete', true);
$backgrounds.each(function(){
if (!$(this).data('complete')) {
complete = false;
}
});
if (complete) {
runSlideshow();
}
}).prop('src', item);
})
var $backgrounds = $background.children();
function runSlideshow() {
$('body').css({background: 'none'}).append($background);
setInterval(changeBackground, delay);
changeBackground();
$(window).resize(updateDimensions);
updateDimensions();
}
function updateDimensions() {
var viewWidth = $background.width();
var viewHeight = $background.height();
$backgrounds.each(function(){
var widthDifference = viewWidth - this.offsetWidth;
var heightDifference = viewHeight - this.offsetHeight;
if (widthDifference > heightDifference) {
this.style.width = '100%';
this.style.height = '';
heightDifference = viewHeight - this.offsetHeight;
this.style.top = heightDifference < 0 ? heightDifference / 2 + 'px' : '';
this.style.left = '';
} else {
this.style.width = '';
this.style.height = '100%';
widthDifference = viewWidth - this.offsetWidth;
this.style.top = '';
this.style.left = widthDifference < 0 ? widthDifference / 2 + 'px' : '';
}
});
}
function changeBackground() {
var index = $background.data('index');
$backgrounds.eq(index).animate({opacity: 0}, duration);
index = (index < $backgrounds.length - 1) ? index + 1 : 0;
$backgrounds.eq(index).animate({opacity: 1}, duration);
$background.data('index', index);
}
</script>
</body>
</html>
Фоллбэк на css, предзагрузка изображений (правда ждется загрузка всех картинок, а не по очереди), плавные переходы, центровка обрезаемых изображений. Ну конечно грех было не воспользоваться jQuery. Поставьте delay побольше - чтоб не напрягало сильно мелькание фона.
