Sayfa yenilendikçe arka plan değiştirme (CSS)

Merhaba arkadaşlar 15 dk bir google araması sonucu bulduğum ve üzerinde belirli değişiklikler yaptığım kodları sizlerle paylaşmak istiyorum.

DEMO: http://socialtel.net/login.php

CSS Kodlarımız

var backgroundSrcs = new Array('images/bg1.jpg','images/bg2.jpg','images/bg3.jpg','images/bg4.jpg','images/bg4.jpg','images/bg4.jpg','images/bg4.jpg');
var backgroundClrs = new Array('#ff0099','#004080','#cc0000','#cc9966','#ff6633','#ff0099','#ffffff');

// rasgele sayımız
var rnd= Math.round(Math.random()*(backgroundSrcs.length-1));

function changeSomething(){
if (document.body) {
// rastgele sayıya karşılık gelen arka plan
document.body.style.backgroundImage = 'url('+backgroundSrcs[rnd]+')';
// ve renk
document.body.style.backgroundColor = backgroundClrs[rnd];
document.body.style.backgroundRepeat = 'no-repeat';
document.body.style.backgroundPosition = 'center center';
document.body.style.backgroundSize = 'cover';
}
}


Resimlerin gözükmesini istediğimiz dosya içine yazılması gereken kodlar:



Css kullanmayanlar için direk resmin çıkmasını istediğiniz sayfaya eklenecek kodlar. Herhangi bir yere. Örnek sitenin en üstüne:
<script>
var backgroundSrcs = new Array('images/bg1.jpg','images/bg2.jpg','images/bg3.jpg','images/bg4.jpg','images/bg4.jpg','images/bg4.jpg','images/bg4.jpg');
var backgroundClrs = new Array('#ff0099','#004080','#cc0000','#cc9966','#ff6633','#ff0099','#ffffff');

// rasgele sayımız
var rnd= Math.round(Math.random()*(backgroundSrcs.length-1));

function changeSomething(){
if (document.body) {
// rastgele sayıya karşılık gelen arka plan
document.body.style.backgroundImage = 'url('+backgroundSrcs[rnd]+')';
// ve renk
document.body.style.backgroundColor = backgroundClrs[rnd];
document.body.style.backgroundRepeat = 'no-repeat';
document.body.style.backgroundPosition = 'center center';
document.body.style.backgroundSize = 'cover';
}
}
</script>



KAYNAK