Как сделать анимированный фон на странице
Пару дней назад мне задали вопрос по поводу того, как сделать анимированный фон на странице. При этом человек знал и про background, и про CSS. Он у меня попросил скрипт на JavaScript, позволяющий делать анимацию фона. Я ему сказал, что здесь JavaScript совсем не нужен. И показал ему, как можно сделать анимированный фон только с применением CSS. Вот об этом способе я и напишу в данной статье.
Способ совершенно тривиальный и простой, думаю, что многие до него додумаются сразу. Вот CSS-код:
html {
background: url(images/bg.gif) no-repeat; /* Задаём фон GIF-картинкой */
height: 100%; /* 100% высота страницы */
}
Ключевым моментом здесь является GIF-изображение. Думаю, что Вам известно, что в GIF можно делать достаточно сложную анимацию (в рамках целесообразности, конечно). Поэтому никаких скриптов не нужно, чтобы сделать любой фон, а не только страницы, анимированным.
Таким образом, достаточно создать анимированный GIF, вставить его на страницу самым простым CSS-кодом, и у Вас получится анимированный фон на странице.
-
Создано 16.05.2012 17:10:41
-
Михаил Русаков
Комментарии (19):
Совсем просто интересно зачем задавали такой вопрос
Ответить
Не нашел где спросить, спрошу тут) У меня есть сайт свой, могу показать если попросите, так вот, когда я его открываю через телефон (iphone), то он открывает его не весь, а часть где-то 80%, когда все остальные сайты открываются на 100% такая же фигня и в яндекс баре (закладки) там окошки с сайтами, так же на окошке этом сайт виден на 80% а все остальные вмещает на 100%. Сравнивал CSS коды, разницы существенной не заметил, Помогите пожалуйста) Как то туфтово все описал, думаю Вы поймете)
Ответить
Дело в вёрстке, точнее в её низком качестве. Ничего сказать невозможно, кроме как посоветовать научиться хорошо верстать и всё сделать заново. Вот курс по вёрстке: http://srs.myrusakov.ru/makeup
Ответить
Михаил! Помогите! У меня на сайте есть шапка и на шапке кнопки! Если смотреть на сайте при масштабе 100% то всё нормально, но если смотреть на 50% или 200% и т.п. Шапка и кнопки сдвигаются! А на вашем сайте только масштаб уменьшается, а кнопки остаются на местах! Как вы это сделалил напишите пожалуйста!!!
Ответить
Используйте относительные размеры (то есть проценты), тогда они будут изменяться в зависимости от масштаба.
Ответить
Я пробовал! Но если я ставлю width = 100%; То у меня появляются отступы слева и справо! Тоже самое и с высотой! Что делать?
Ответить
Отступы слева и справа - это margin (или padding). Вряд ли они у изображения, возможно, они у body. Поэтому поставьте у body {margin: 0; padding: 0;}
Ответить
У меня шапка залита в <head>!!! Поставить это в head??? Или перенести шапку в body?
Ответить
В <head> вообще не должно быть контента. Весь контент в <body>.
Ответить
перенесу шапку в body и сделаю как вы писали! Спасибо
Ответить
Шапку сделал как вы сказали! Всё нормально! А вот у меня прямо на шапке есть кнопки навигации! Как с ними быть? Потому что если я меняю масштаб то шапка остаётся как было, а кнопки сдвигаются кто куда! Попробовал расставить кнопки на шапке с помощью % , а не px! Но это не помогло!
Ответить
Значит проблема в Вашей верстке. Что именно происходит с кнопками?
Ответить
У меня сделаны анимированные кнопки по вашему уроку http://myrusakov.ru/css-hover-image.html Ну вот когда я меняю масштаб в браузере то кнопки(которые сделаны на картинке-шапке) Начинают "Прыгать"! Сбивается их положение! Если они были до этого на шапке то они выходят за её пределы и т.п.
Ответить
Они так и должны прыгать. Иначе придется ставить фиксированное position. Задавать left, top и так далее.
Ответить
У меня стоит left и top Только фиксированное position не стоит! Как это правильно сделать? Вот код css кнопки: .sovety { background = url("image/buttons/sovety.jpg") no repeat; height = 50px; width = 150px; margin top = 111px; position: absolute; left: -10px; } .sovety:hover { background = url("image/buttons/sovety1.jpg") no repeat; height = 50px; width = 150px; }
Ответить
Нужно position: absolute; и свойства left, top, right и bottom. И ещё margin-top, а не margin top.
Ответить
Всё равно что-то не получается!:( вот код: .but { top: 220px; position: absolute; right:100px; bottom:290px; left: 500px; } И тем не менее они всё равно смещаются
Ответить
Всё! Вроде разобрался! Заместо position: absolute ПОСТАВИЛ: position: static (что в прочем и так по умолчанию стоит!) И всё стало норм!:)
Ответить
У меня почему-то не получилось задать фон таким способом.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.