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


Скачать исходники для статьи можно ниже

GIF – это популярный формат графических изображений, поддерживающий анимацию.

1. Гирлянды gif

Давайте вставим вот такую gif картинку-анимашку-гирлянду в верхней части сайта:

Для этого можно зайти в админку wordpress, в левом меню выбрать пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем файл header.php и сразу после тега “body” вставляем код блока с нашей gif гирляндой:

<div style="height: 30px; background: url(https://mnogoblog.ru/wp-content/uploads/2014/12/girlanda.gif) repeat-x 100%;"></div>

Вот скриншот вставки данного кода:

Для того чтобы сделать отступ сверху, добавьте в стили свойство margin-top, например так:

<div style="margin-top: 20px; height: 30px; background: url(https://mnogoblog.ru/wp-content/uploads/2014/12/girlanda.gif) repeat-x 100%;"></div>

Или же данную гирлянду можно подключить с помощью wordpress плагина, вот по данной ссылке можете его скачать – Скачать плагин “Новогодняя гирлянда”!

2. Вставляем симпатичную gif картинку в нижней части сайта.

Давайте прикрепим следующую картинку:

Для этого также как и в пункте 1 данной статьи – входим в админку wordpress, в левом меню выбираем пункт “Внешний вид”, подпункт “Редактор”, в списке шаблонов выбираем файл header.php и вставляем после тега “body” следующий код блока с данной картинкой:

<div style="position:fixed;left:0;bottom:-4px;;">
<img src="https://mnogoblog.ru/wp-content/uploads/2014/12/newyeargif.png"> 
</div>

В итоге картинка прикрепиться в нижнем левом углу сайта:

Если картинка вам кажется слишком большой (размер оригинала 460*180), то с помощью свойств width и height можно ее уменьшить, например так:

<div style="position:fixed;left:0;bottom:-4px;;">
<img src="https://mnogoblog.ru/wp-content/uploads/2014/12/newyeargif.png" width="307" height="120"> 
</div>

3. Давайте рассмотрим еще одну gif картинку-анимацию-гирлянду по бокам сайта:

Гирлянда состоит из gif картинок-анимаций:

Для начала пропишем в файле стилей следующий CSS код, а для этого войдем в админку wordpress, в левом меню выбираем пункт “Внешний вид”, его подпункт “Редактор”, в списке шаблонов откроется файл style.css – в самый низ его кода вставим следующий фрагмент:

#ramka {
background: url('https://mnogoblog.ru/wp-content/uploads/2014/12/girlanda0.gif') repeat-y 0% 0px, url('https://mnogoblog.ru/wp-content/uploads/2014/12/girlanda01.gif') repeat-y 100% 0px; padding:0px 8px;
} 

Далее нам нужно вставить блок гирлянды на сайте:

<div id="ramka">
...
</div>

Можно обернуть блоком “ramka” любой блок вашего сайта, например wrapper, page и т.д.
Возьмем для примера стандартную тему wordpress – twenty Twelve и обернем в ней блок “page” блоком “ramka” – для этого заходим в админку wordpress, в левом меню выбираем пункт “Внешний вид”, его подпункт “Редактор”, в списке шаблонов открываем файл header.php и находим блок page и перед ним открываем блок “ramka”:

А в файле footer.php добавим закрывающий тег блока:

В итоге будет выглядеть так: