Пару дней назад мне задали вопрос по поводу того, как сделать анимированный фон на странице . При этом человек знал и про background , и про CSS . Он у меня попросил скрипт на JavaScript , позволяющий делать анимацию фона. Я ему сказал, что здесь JavaScript совсем не нужен. И показал ему, как можно сделать анимирова...

Как сделать анимированный фон на странице

Пару дней назад мне задали вопрос по поводу того, как сделать анимированный фон на странице. При этом человек знал и про background, и про CSS. Он у меня попросил скрипт на JavaScript, позволяющий делать анимацию фона. Я ему сказал, что здесь JavaScript совсем не нужен. И показал ему, как можно сделать анимированный фон только с применением CSS. Вот об этом способе я и напишу в данной статье.

Способ совершенно тривиальный и простой, думаю, что многие до него додумаются сразу. Вот CSS-код:

html {
  background: url(images/bg.gif) no-repeat; /* Задаём фон GIF-картинкой */
  height: 100%; /* 100% высота страницы */
}

Ключевым моментом здесь является GIF-изображение. Думаю, что Вам известно, что в GIF можно делать достаточно сложную анимацию (в рамках целесообразности, конечно). Поэтому никаких скриптов не нужно, чтобы сделать любой фон, а не только страницы, анимированным.

Таким образом, достаточно создать анимированный GIF, вставить его на страницу самым простым CSS-кодом, и у Вас получится анимированный фон на странице.