Случайный бекграунд при загрузке страницы

Вы узнаете как задать случайный бекграунд для страницы. При загрузке выбирается произвольная картинка из списка.
Код который нам понадобиться разобьем на несколько частей.

CSS:

#img-bg {
	display: block;
	height: auto;
	left: 0;
	min-height: 100%;
	min-width: 1024px;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: -1;
}

Стиль для контейнера с id=»img-bg» мы создали. HTML на странице можем сгенерировать при помощи JS:

<script type="text/javascript">
var phr = new Array()
phr.push("img/randombg1.png")
phr.push("img/randombg2.jpg")
phr.push("img/randombg3.jpg")
phr.push("img/randombg4.jpg")
phr.push("img/randombg5.jpg")
phr.push("img/randombg6.jpg")
phr.push("new.jpg")

document.write('<img id="img-bg" src="'+phr[Math.floor(Math.random()*(phr.length-1))]+'" >');
</script>

В папке img находится список картинок, из которых выбирается случайная и подставляется в атрибут src нашего тега img.

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru.

Какие услуги предоставляю:
- Создание сайтов, шаблонов и компонентов на 1С-Битрикс;
- Разработка функционала с нуля и доработка кода на уже созданных проектах;
- Адаптивная вёрстка макетов и натяжка на Битрикс;
- Парсинг файлов и выгрузка на сайт (форматы - CSV, XML, XLSX, JSON)
- Интеграции со сторонними сервисами по API;
- Многоязычные версии и многое другое.

Если у вас остались вопросы, свяжитесь со мной любым удобным для вас способом или оставьте комментарий внизу.
E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *