Как сделать фон сайта из разных gif
Пытаюсь сделать фон из нескольких gif-картинок. Хотелось бы чтобы и справа была гифка и слева, и соответственно так же вверху и внизу. Делаю так на странице, пока получилось по центру одну влепить. Может знаете как это правильно реализовать.
С Днюхой . html 
получаеться вот такое
Отслеживать
задан 12 июн 2019 в 6:59
515 4 4 серебряных знака 19 19 бронзовых знаков
Вам нужно использовать свойства: position, left, right, top, bottom. Справка — тут w3schools.com
12 июн 2019 в 7:19
@nick_n_a я не могу в свой код еще добавить gif-ок, только одна отображается, может у вас есть пример какой нибудь?
12 июн 2019 в 7:21
Фон может быть один. Не знаю можно ли «скомбинировать». Расставьте img или div задайте им например position:float right:0px;width:ширина картинки и т д. Поддерживают ли браузеры прозрачность — png — да. gif — нет.
12 июн 2019 в 7:22
Ну да, так фейерверки залазят за gif-ки, спасибо за помощь, оставлю одну по центру.
12 июн 2019 в 7:45
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
С помощью background-position можно поменять расположение. Загуглите, чтобы узнать подробней. Можете также добавить это в в ваш background. Чтобы сделать 4 штуки, можете попробовать так:
С Днюхой . html Плюсом можете редактировать ширину и высоту индивидуально. Вместо top, left и т.д. можете использовать проценты, пиксели, и т.д.
Можно ли сделать анимированный фон?
Мультипликация это достаточно сильный прием, способный оживить любой документ, поэтому не удивительно, что огромную популярность приобрела технология Flash, которая добавляет на веб-страницы мультики, к тому же интерактивные. Графический формат GIF также поддерживает простейшую анимацию путем последовательной смены кадров. Так что используя изображение в этом формате допустимо анимировать не только отдельные картинки, но также фон веб-страницы или определенного элемента.
Вначале потребуется создать анимированную картинку в формате GIF, для чего можно воспользоваться программой Adobe Photoshop или другой подходящей для этой цели. Также существуют библиотеки готовых анимированных файлов, которые можно применять в качестве фоновой картинки. Далее изображение добавляется в качестве фона с помощью стилевого свойства background , как показано в примере 1.
Пример 1. Анимированный фон веб-страницы
HTML5 CSS 2.1 IE Cr Op Sa Fx
Анимированный фон Содержимое веб-страницы
В данном примере файл light.gif устанавливается в качестве фоновой картинки в правом нижнем углу веб-страницы. Также задается черный цвет фона.
Учтите, что любая анимация привлекает к себе внимание, поэтому использовать ее следует весьма осмотрительно, чтобы не утомлять читателей и не отвлекать их от основного содержания сайта.
Анимация фона
Анимация снова в моде, как и много лет назад, когда для этой цели применялся GIF. Только сейчас всё делается с помощью стилей, что удобнее и современнее. Так что добавим немного хаоса и движения в этот мир и сделаем фон на веб-странице анимированным?
Почему именно фон? У него куча плюсов. Главное, фон лежит себе на заднем плане и не мешает выводить поверх него остальные элементы. К тому же у background есть множество параметров, включая функции для градиентов, всё это позволяет разнообразить создание фона.
Для начала сделаем пока просто вывод фона для всей страницы без анимации. Стиль получится такой:
body < background: url(images/city.png) repeat-x 0 100% fixed, linear-gradient(to top, #5080b1, #004e8c) fixed; >Фоновая картинка city.png имеет ширину 1000 пикселей и повторяется без стыков по горизонтали. На рис. 1 она показана в уменьшенном виде. Для красоты добавим на заднем плане градиент, он будет создавать эффект тёмного неба.
Рис. 1. Картинка для фона
Высота не совпадает с высотой окна браузера, а равна высоте контента. Поэтому просто так фон поместить в самый низ окна не получится. Для этого применяют всякие хитрости, вроде установки высоты 100% для селекторов html и body . Мы пойдём другим путём и добавим параметр fixed к каждому фону. Он фиксирует фон на одном месте и не прокручивает его, как обычно, вместе с содержимым. Заодно привязывает фон к окну браузера. Вот как выглядит страница с фоном (рис. 2).
Теперь добавляем бесконечную анимацию. Пусть город плавно движется слева направо. Поскольку фон у нас повторяется без стыков, получится зацикленное движение без рывков. В свойстве animation пишем имя нашей анимации city, добавляем линейное движение через linear и ставим infinite для бесконечного повтора. Время анимации определяется методом Подборского, в общем, ставим что больше нравится. У меня 30 секунд.
animation: city 30s linear infinite;Теперь переходим к ключевым кадрам. Нам надо только менять позицию фона. Мы знаем, что ширина фона равна 1000px, на это значение и сдвигаем фон.
@keyframes city < from < background-position: -1000px 100%, 0 0;>to < background-position: 0 100%; >>Можно менять от -1000 до 0 или 0 до 1000, это не имеет значения. Градиент под картинкой не трогаем. Хотя теоретически его движение по горизонтали не должно быть заметно, Хром под Windows добавляет небольшой шум к фону. Без анимации градиент выглядит лучше, к тому же она нам совсем ни к чему, двигаться должна только картинка города.
Добавляем префикс -webkit где это требуется и анимированный фон готов. Для наглядности поверх выводится полупрозрачный блок (пример 1).
Пример 1. Анимированный фон
Фон body < background: url(images/city.png) repeat-x 0 100% fixed, linear-gradient(to top, #5080b1, #004e8c) fixed; animation: city 30s linear infinite; -webkit-animation: city 30s linear infinite; >@keyframes city < from < background-position: -1000px 100%, 0 0;>to < background-position: 0 100%, 0 0; >> @-webkit-keyframes city < from < background-position: -1000px 100%, 0 0;>to < background-position: 0 100%, 0 0; >> main Бла-бла Добавим больше хаоса на страницу и вставим ещё два облака. Ссылаются они на один файл, но двигаться будут по разному.
body < background: url(images/city.png) repeat-x 0 100% fixed, url(images/cloud.png) no-repeat fixed, url(images/cloud.png) no-repeat fixed, linear-gradient(to top, #5080b1, #004e8c) fixed; >В итоге у нас получилось аж четыре фона и для background-position их надо все указывать. Чем фоновая картинка хороша, её можно легко позиционировать за пределами окна, задавая отрицательное значение координат. При этом никаких полос прокрутки не появится, это же фон, а не обычный элемент. Так что размещаем облака справа, а двигаться они будут далеко влево. Отдельно задать скорость движения каждого рисунка нельзя, потому что background у нас один, так что регулируем скорость, увеличивая или уменьшая дистанцию движения через background-position (пример 2).
Пример 2. Анимация нескольких фоновых картинок
Фон Как сделать анимированный фон на странице
Пару дней назад мне задали вопрос по поводу того, как сделать анимированный фон на странице. При этом человек знал и про 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
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 19 ):
ken15 17.05.2012 10:37:03
Совсем просто интересно зачем задавали такой вопрос
idxdoc 27.05.2012 14:23:48
Не нашел где спросить, спрошу тут) У меня есть сайт свой, могу показать если попросите, так вот, когда я его открываю через телефон (iphone), то он открывает его не весь, а часть где-то 80%, когда все остальные сайты открываются на 100% такая же фигня и в яндекс баре (закладки) там окошки с сайтами, так же на окошке этом сайт виден на 80% а все остальные вмещает на 100%. Сравнивал CSS коды, разницы существенной не заметил, Помогите пожалуйста) Как то туфтово все описал, думаю Вы поймете)
Admin 27.05.2012 18:34:18
Дело в вёрстке, точнее в её низком качестве. Ничего сказать невозможно, кроме как посоветовать научиться хорошо верстать и всё сделать заново. Вот курс по вёрстке: http://srs.myrusakov.ru/makeup
lev_100rus 12.07.2012 18:28:46
Михаил! Помогите! У меня на сайте есть шапка и на шапке кнопки! Если смотреть на сайте при масштабе 100% то всё нормально, но если смотреть на 50% или 200% и т.п. Шапка и кнопки сдвигаются! А на вашем сайте только масштаб уменьшается, а кнопки остаются на местах! Как вы это сделалил напишите пожалуйста.
Admin 12.07.2012 19:45:17
Используйте относительные размеры (то есть проценты), тогда они будут изменяться в зависимости от масштаба.
lev_100rus 12.07.2012 19:56:25
Я пробовал! Но если я ставлю width = 100%; То у меня появляются отступы слева и справо! Тоже самое и с высотой! Что делать?
Admin 12.07.2012 20:01:01
Отступы слева и справа — это margin (или padding). Вряд ли они у изображения, возможно, они у body. Поэтому поставьте у body
lev_100rus 12.07.2012 20:12:09
У меня шапка залита в . Поставить это в head. Или перенести шапку в body?
Admin 12.07.2012 20:38:55
В вообще не должно быть контента. Весь контент в .
lev_100rus 12.07.2012 20:48:07
перенесу шапку в body и сделаю как вы писали! Спасибо
lev_100rus 13.07.2012 15:54:47
Шапку сделал как вы сказали! Всё нормально! А вот у меня прямо на шапке есть кнопки навигации! Как с ними быть? Потому что если я меняю масштаб то шапка остаётся как было, а кнопки сдвигаются кто куда! Попробовал расставить кнопки на шапке с помощью % , а не px! Но это не помогло!
Admin 13.07.2012 16:11:46
Значит проблема в Вашей верстке. Что именно происходит с кнопками?
lev_100rus 13.07.2012 16:43:41
У меня сделаны анимированные кнопки по вашему уроку http://myrusakov.ru/css-hover-image.html Ну вот когда я меняю масштаб в браузере то кнопки(которые сделаны на картинке-шапке) Начинают «Прыгать»! Сбивается их положение! Если они были до этого на шапке то они выходят за её пределы и т.п.
Admin 13.07.2012 17:11:42
Они так и должны прыгать. Иначе придется ставить фиксированное position. Задавать left, top и так далее.
lev_100rus 13.07.2012 17:26:17
Admin 13.07.2012 17:39:26
Нужно position: absolute; и свойства left, top, right и bottom. И ещё margin-top, а не margin top.
lev_100rus 13.07.2012 18:13:05
Всё равно что-то не получается!:( вот код: .but < top: 220px; position: absolute; right:100px; bottom:290px; left: 500px; >И тем не менее они всё равно смещаются
lev_100rus 13.07.2012 22:24:15
Всё! Вроде разобрался! Заместо position: absolute ПОСТАВИЛ: position: static (что в прочем и так по умолчанию стоит!) И всё стало норм!:)
[email protected] 28.03.2015 19:52:41
У меня почему-то не получилось задать фон таким способом.
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.