• Главная
  • uCoz
  • Как сделать случайный фон для сайта без Java Script

Как сделать случайный фон для сайта без Java Script

Часто сталкиваюсь с тем, что пользователи хотят сделать свой фон сайта и чтобы при каждом новом обновлении страницы фон менялся на новый - случайный фон. То есть хотят сделать рандомный фон. Сегодня я опишу решение данного вопроса и вы сможете сами себе сделать для своего сайта рандомный фон.

Как сделать случайный фон для сайта uCoz

Делается достаточно просто. В файловом менеджере создаете папку которая будет специально отведена под картинки фона. Загружаете сколько вам нужно для этого картинок фона (5-10-50-100-200). Все фото должны иметь название начиная с 0 и по нужное вам значение.

То есть если у вас будет 10 фото фона сайта, фото должны называться подобно:

  1. 0.png
  2. 1.png
  3. 2.png
  4. 3.png
  5. 4.png
  6. 5.png
  7. 6.png
  8. 7.png
  9. 8.png
  10. 9.png
  11. 10.png

вместо формата фото png может быть любой другой и jpg, jpeg или же gif. Главное, чтобы все фото имели очередность начиная с 0 и по нужное вам значение количества фото.

Если вы уже все сделали, загрузили фото в нужную вам папку, я их загрузил в папку /bg/ в корень фтп сайта, далее в глобальным блок нижняя часть сайта в самый низ устанавливаем подобный код:

<style> body {background: url(/bg/<?rnd10?>.png)no-repeat 0%0%/cover fixed!important;} </style>

вот и все, этого достаточно чтобы фон сменялся рандомно при каждом обновлении страницы. Оператор который я прописал в коде выше:

<?rnd10?>

он будет при каждом обновлении страницы генерировать случайное число от 0 до 10 и в результате, в зависимости от того, какое случайное число будет сгенерировано, фото с таким числом будет загружено как фон сайта. Вы можете сделать как вам нужно, и прописать вместо 10 например 20 или 50 или 100 и соответственно в коде <?rnd10?> меняем 10 на нужное вам значение и загружаем такое количество фото в папку для ваших фонов сайта.

Если у вас остались вопросы по материалу выше или другие сложности по этой же теме, спрашивайте в комментариях под материалом.

Лицензия: CC BY-SA 4.0

Автор: Юрий Герук

Похожие материалы:
Помогла ли вам статья?
Да Нет
Статья оказалась полезной для 0 человек