Динамический фон

[Lawilet]

Доброго времени суток, уважаемые.

Необходима помощь.
Появилась потребность в динамичном фоне веб страницы, т.е. при обновлении - фон меняется на другой.
Фоны в виде фотографий хорошего качества.

Необходимо что бы фон растягивался на всю веб страницу, сейчас это реализовано вот так:

<style type="text/css">
  html, body {height: 100%;}
body {margin:0;
background: url(fonsite.jpg) no-repeat 50% 50%;
background-size: cover;
  </style>

Нужно что бы выбиралась другая фотография, при обновлении.
Если у вас есть готовые варианты, или энтузиазм, просьба поделиться.

[ZvEr_HaCkEr]

Че-то типа этого

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
	$(document).ready(function() {
		var a=Math.round(Math.random() * 3);
		if(a==1)
		$('body') .css('background','#000000 url(img/bg1.jpg) no-repeat 50% 50%');
		if(a==2)
		$('body') .css('background','#000000 url(img/bg2.jpg) no-repeat 50% 50%');
		if(a==3)
		$('body') .css('background','#00000 url(img/bg3.jpg) no-repeat 50% 50%');
	});
</script>

[Lawilet]

Попробую.
Единственное что при объеме, допустим в 30 фотографий, будет не удобно.

[Lawilet]

Сообщение от ZvEr_HaCkEr

Че-то типа этого

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
	$(document).ready(function() {
		var a=Math.round(Math.random() * 3);
		if(a==1)
		$('body') .css('background','#000000 url(img/bg1.jpg) no-repeat 50% 50%');
		if(a==2)
		$('body') .css('background','#000000 url(img/bg2.jpg) no-repeat 50% 50%');
		if(a==3)
		$('body') .css('background','#00000 url(img/bg3.jpg) no-repeat 50% 50%');
	});
</script>

Проблема.
Иногда просто черный экран в виде фона, без фото.

Код на данный момент:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
	$(document).ready(function() {
		var a=Math.round(Math.random() * 7);
		if(a==1)
		$('body') .css('background','#000000 url(images/fon/1.jpg) no-repeat 50% 50%');
		if(a==2)
		$('body') .css('background','#000000 url(images/fon/2.jpg) no-repeat 50% 50%');
		if(a==3)
		$('body') .css('background','#00000 url(images/fon/3.jpg) no-repeat 50% 50%');
		if(a==4)
		$('body') .css('background','#00000 url(images/fon/4.jpg) no-repeat 50% 50%');
		if(a==5)
		$('body') .css('background','#00000 url(images/fon/5.jpg) no-repeat 50% 50%');
		if(a==6)
		$('body') .css('background','#00000 url(images/fon/6.jpg) no-repeat 50% 50%');
		if(a==7)
		$('body') .css('background','#00000 url(images/fon/7.jpg) no-repeat 50% 50%');
	});
</script>

[savva-paladin]

Насколько я помню, в языках, основанных на С, отсчёт начинается с 0…

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
	$(document).ready(function() {
		var a=Math.round(Math.random() * 7);
		if(a==0)
		$('body') .css('background','#000000 url(images/fon/1.jpg) no-repeat 50% 50%');
		if(a==1)
		$('body') .css('background','#000000 url(images/fon/2.jpg) no-repeat 50% 50%');
		if(a==2)
		$('body') .css('background','#00000 url(images/fon/3.jpg) no-repeat 50% 50%');
		if(a==3)
		$('body') .css('background','#00000 url(images/fon/4.jpg) no-repeat 50% 50%');
		if(a==4)
		$('body') .css('background','#00000 url(images/fon/5.jpg) no-repeat 50% 50%');
		if(a==5)
		$('body') .css('background','#00000 url(images/fon/6.jpg) no-repeat 50% 50%');
		if(a==6)
		$('body') .css('background','#00000 url(images/fon/7.jpg) no-repeat 50% 50%');
	});
</script>

[ZvEr_HaCkEr]

Сорри, описался. Последуйте совету savva-paladin.

[Lawilet]

Проблема решена, была довольно таки глупая ошибка.

Просьба обратить внимание вот сюда: http://www.programmersforum.ru/showthread.php?t=168142

[Exebeche]

Спасибо, savva-paladin.
Очень интересный прием. Вчера на него наткнулся и решил использовать для своего экспериментального сайта.
Хотел немного усовершенствовать скрипт, но наткнулся на проблему - не срабатывает для :hover.
Как можно решить эту проблему?
И можно ли как-то добавить еще некоторые классы для отображения "оттенка" имеющихся фонов?
Имеющийся код:

<script type="text/javascript">
	$(document).ready(function() {
		var a=Math.round(Math.random() * 11);
		if(a==0)
		$( .menu-bar li a:hover, .menu li a:hover, '.menu li:first-child a, .menu-bar li:first-child a, .header') .css('background','#7e71d1');
		if(a==1)
		$('.menu-bar li a:hover, .menu li a:hover, .menu li:first-child a, .menu-bar li:first-child a, .header') .css('background','#267fdd');
		if(a==2)
		$('.menu-bar li a:hover, .menu li a:hover, .menu li:first-child a, .menu-bar li:first-child a, .header') .css('background','#1468ba');
		if(a==3)
		$('.menu-bar li a:hover, .menu li a:hover, .menu li:first-child a, .menu-bar li:first-child a, .header') .css('background','#4ebaca');
		if(a==4)
		$('.menu-bar li a:hover, .menu li a:hover, .menu li:first-child a, .menu-bar li:first-child a, .header') .css('background','#8455cf');
		if(a==5)
		$('.menu-bar li a:hover, .menu li a:hover, .menu li:first-child a, .menu-bar li:first-child a, .header') .css('background','#0047ff');
		if(a==6)
		$('.menu-bar li a:hover, .menu li a:hover, .menu li:first-child a, .menu-bar li:first-child a, .header') .css('background','#006dd6');
		if(a==7)
		$('.menu-bar li a:hover, .menu li a:hover, .menu li:first-child a, .menu-bar li:first-child a, .header') .css('background','#f46161');
		if(a==8)
		$('.menu-bar li a:hover, .menu li a:hover, .menu li:first-child a, .menu-bar li:first-child a, .header') .css('background','#32c555');
		if(a==9)
		$('.menu-bar li a:hover, .menu li a:hover, .menu li:first-child a, .menu-bar li:first-child a, .header') .css('background','#9b72ff');
		if(a==10)
		$('.menu-bar li a:hover, .menu li a:hover, .menu li:first-child a, .menu-bar li:first-child a, .header') .css('background','#eb58ac');
		if(a==11)
		$('.menu-bar li a:hover, .menu li a:hover, .menu li:first-child a, .menu-bar li:first-child a, .header') .css('background','#c87f35');
	});
</script>