Установка GIF» Формат обмена графикой » в качестве фонового изображения добавляет в дизайн визуально привлекательный элемент. GIF позволяет разработчикам передавать информацию или выделять продукт или услугу, что помогает создать визуальную идентичность бренда. Однако разработчики должны следить за тем, чтобы использование GIF-файлов не перегружало веб-страницу и не отвлекало пользователя от основного контента.

В этой статье демонстрируется процедура установки GIF в качестве фонового изображения на веб-странице.

Как установить GIF в качестве фонового изображения на веб-странице?

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

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

Пример 1: установка GIF в качестве фиксированного фона

Поскольку элементы HTML, которые помогают в создании содержимого веб-страницы, помещаются внутри « <тело> ' ярлык. Именно поэтому, выбирая « тело ” и применить к нему свойства CSS. Это влияет на все содержащие HTML-элементы « <тело> ' ярлык.

Например, «

' и '

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

< тело >
< h1 > Настройка гифка как фоновое изображение на странице h1 >
< п > Этот GIF был добавлен как фоновое изображение на всю страницу, используя 'изображение на заднем плане' Свойство. Эта статья написана на Linuxhint. п >
тело >

Теперь выберите HTML-элемент «body» внутри « <стиль> ” или в отдельном “ CSS », чтобы применить стиль к веб-странице:

тело {
фоновое изображение: URL ( 'море.gif' ) ;
фоновый повтор: без повтора;
размер фона: обложка;
отступ: 50 пикселей;
размер шрифта: x-большой;
белый цвет;
}

В приведенном выше блоке кода:

• • Во-первых, « URL() », который сохраняет путь к « гифка ' файл. И этот метод передается как значение в CSS». изображение на заднем плане ' свойство.
  • Далее установите « неповторяющийся 'в качестве значения для CSS' фоновый повтор ” для повторения файла GIF.
  • Затем установите значение « крышка 'к CSS' размер фона ” чтобы покрыть все доступное пространство
  • После этого укажите значение « 50 пикселей ' и ' х-большой 'к CSS' набивка ' и ' размер шрифта свойства соответственно. Это добавляет интервал вокруг текста и увеличивает размер шрифта.

После компиляции веб-страница выглядит так:

Приведенный выше вывод показывает, что в качестве фона на веб-странице был добавлен gif.

Пример 2. Установка GIF в качестве прокручиваемого фона

Сначала создайте структуру HTML, чтобы содержимое веб-страницы выглядело следующим образом:

< див сорт '=' 'контай' >
< h1 > Настройка гифка как фоновое изображение на странице h1 >
< п > Этот GIF был добавлен как фоновое изображение на всю страницу с помощью 'изображение на заднем плане' Свойство. Эта статья написана на Linuxhint. п >
див >

< див >
< h3 стиль '=' 'белый цвет;' > Контент, написанный за пределами 'див' элемент h3 >
див >

В приведенном выше коде:

• • Во-первых, родитель» <дел> » используется с классом « содержать ».
  • Далее используйте « h1 ' и ' п HTML-элементы и предоставить им фиктивный контент.
  • После этого создайте еще один « <дел> » и использовать «

    », предоставив ему фиктивные данные.

Теперь добавьте GIF в качестве фона на веб-страницу, вставив следующие свойства CSS:

.contai {
фоновое изображение: URL ( море.gif ');
фоновый повтор: без повтора;
размер фона: обложка;
высота: 100вх;
дисплей: гибкий;
выравнивание элементов: по центру;
выравнивание содержимого: по центру;
flex-направление: столбец;
белый цвет;
размер шрифта: большой;
выравнивание текста: по центру;
набивка: 2рем;
}

Описание использованного выше блока кода:

• • Сначала установите « образ-путь », « неповторяющийся т» и « крышка 'в качестве значения для CSS' изображение на заднем плане », « фоновый повтор ' и ' размер фона свойства соответственно.
  • Далее установите значение « 100vh ' и ' сгибаться 'к CSS' высота ' и ' отображать ' характеристики.
  • После этого используйте CSS « цвет », « размер шрифта », « выравнивание текста ' и ' набивка », чтобы применить стиль к содержимому.

После завершения процесса компиляции веб-страница выглядит так:

Вывод показывает, что « гифка ” был вставлен в качестве фонового изображения на всю страницу.

Заключение

Чтобы установить GIF в качестве фонового изображения на веб-странице, CSS « изображение на заднем плане » свойство используется в HTML « тело элемент. Свойство CSS, применяемое к элементу body, автоматически применяется ко всем содержащимся элементам. Установив « 100vh ” в качестве значения свойства height также можно включить эффект прокрутки. Это позволяет фоновому gif перемещаться по прокрутке. В этой статье показано, как установить GIF в качестве фонового изображения на веб-странице.