<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
html{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #fff;
}
body{
min-height: 100%;
margin: 0;
padding: 0;
background-position: top center;
background-repeat: no-repeat;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
p {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
height: 50px;
width: 300px;
color: #FFFFFF;
font-size: 2em;
}
</style>
</head>
<body>
<p>Всякая всячина</p>
<script>
(function(){
var interval = 1500,
pictures = [
'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'
];
for (var i = 0; i < pictures.length; i++) {
(new Image()).src = pictures[i];
}
var imageIndex = 0;
setInterval(function(){
var image = pictures[imageIndex++] || pictures[imageIndex = 0];
if (document.addEventListener) {
document.body.style.backgroundImage = 'url('+ image + ')';
} else {
document.body.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + image + ', sizingMethod="scale")';
}
}, interval);
})();
</script>
</body>
</html>
Работает даже в IE8. Можно зааттачить изображение если назначать его тегу html и прописать background-attachment: fixed (правда что делать с IE8 - не знаю)