Смена фона при перезагрузке страницы на JavaScript
Данный простой скрипт позволяет менять фоновую картинку страницы при каждой перезагрузке страницы. Картинка заполняет весь экран, поэтому при увеличении или уменьшении размера текста, это никак не влияет на фоновое изображение.
Вот сам скрипт:
<!DOCTYPE>
<html>
<head>
<title>Показ случайного фона в JavaScript</title>
<script>
function randomBackgroundImage() {
// массив картинок
let images = ['images/image1.jpg', 'images/image1.jpg', 'images/image2.jpg', 'images/image3.jpg'];
// контейнер у которого будем менять фоновое изображение
let imageBox = document.body.style.backgroundImage;
// выбираем случайную картинку
let image = Math.floor( Math.random() * images.length );
// меняем фон на эту картинку
document.body.style.backgroundImage = 'url(' + images[image] + ')';
}
// вызываем при загрузке/перезагрузке страницы
window.onload = changeImg;
</script>
<style>
body {
color: #fff;
}
.bg {
background-attachment:fixed;
background-repeat: no-repeat;
background-position:cover;
background-size: 100%;
}
</style>
</head>
<body class="bg">
<p>Какой-то текст</p>
Lorem ipsum doloe sit umet, Lorem ipsum doloe sit umet, Lorem ipsum doloe sit umet, Lorem ipsum doloe sit umet,
Lorem ipsum doloe sit umet, Lorem ipsum doloe sit umet, Lorem ipsum doloe sit umet, Lorem ipsum doloe sit umet,Lorem ipsum doloe sit umet, Lorem ipsum doloe sit umet, Lorem ipsum doloe sit umet, Lorem ipsum doloe sit umet,
</body>
</html>
Вот так просто можно добавить динамичности на свой сайт, меняя фоновую картинку страницы на JavaScript.
-
Создано 17.09.2019 10:26:47
-
Михаил Русаков
Комментарии (1):
window.onload = changeImg; будет undefined а вот так работает: window.onload = randomBackgroundImage;
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.