Ustawianie GIF-a „ Format wymiany grafiki ” jako obraz tła dodaje wizualnie atrakcyjny element do projektu. GIF pozwala programistom przekazać informacje lub wyróżnić produkt lub usługę, co pomaga w tworzeniu identyfikacji wizualnej marki. Twórcy muszą jednak upewnić się, że użycie GIF-ów nie przytłoczy strony internetowej ani nie odwróci uwagi użytkownika od głównej zawartości.

W tym artykule pokazano procedurę ustawiania GIF-a jako obrazu tła na stronie internetowej.

Jak ustawić GIF jako obraz tła na stronie internetowej?

Ustawienie GIF-a jako obrazu tła pomaga w tworzeniu przyciągających wzrok elementów poprzez dodanie elementów wizualnych.

Pliki GIF są szczególnie przydatne w witrynach, które chcą przekazać poczucie zabawy lub fantazji, lub na stronach, które chcą wyróżnić konkretny produkt lub funkcję. Aby ustawić go jako obraz tła, odwiedź następujące przykłady:

Przykład 1: Ustawienie GIF jako stałego tła

Ponieważ elementy HTML pomagające w budowaniu treści strony umieszczone są w „ ”znacznik. Dlatego wybierając opcję „ ciało ” i zastosowanie do niego właściwości CSS. Wpływa na wszystkie zawierające elementy HTML „ ”znacznik.

Na przykład „

' I '

Tagi ” są wykorzystywane jako zawartość strony internetowej. Zobacz poniższy fragment kodu:

< ciało >
< h1 > Ustawianie GIF-a Jak obraz tła na stronie h1 >
< P > Ten GIF został dodany Jak obraz tła na całej stronie za pomocą 'zdjęcie w tle' Nieruchomość. Ten artykuł został opracowany przez Linuxhint. P >
ciało >

Teraz wybierz element HTML „body” w „ ” lub w osobnym „ CSS ” do zastosowania stylizacji na stronie:

ciało {
obraz tła: url ( „morze.gif” ) ;
powtórzenie w tle: brak powtórzeń;
rozmiar tła: okładka;
wypełnienie:50 pikseli;
rozmiar czcionki: x-duży;
kolor biały;
}

W powyższym bloku kodu:

• • Po pierwsze ' URL() ” używana jest metoda, która przechowuje ścieżkę „ GIF-y ' plik. Ta metoda jest przekazywana jako wartość do CSS „ zdjęcie w tle ' nieruchomość.
  • Następnie ustaw „ bez powtórzeń ” jako wartość dla CSS “ powtarzanie tła ” dla powtórzenia pliku GIF.
  • Następnie ustaw wartość „ okładka ” do CSS “ rozmiar tła ” do pokrycia całej dostępnej przestrzeni
  • Następnie podaj wartość „ 50px ' I ' x-duży ” do CSS “ wyściółka ' I ' rozmiar czcionki ”, odpowiednio. Spowoduje to dodanie odstępów wokół tekstu i powiększenie rozmiaru czcionki.

Strona po kompilacji wygląda tak:

Powyższe dane wyjściowe pokazują, że gif został dodany jako tło na stronie internetowej.

Przykład 2: Ustawienie GIF jako przewijanego tła

Najpierw utwórz strukturę HTML, aby treść strony internetowej wyglądała tak:

< dz klasa = „zawiera” >
< h1 > Ustawianie GIF-a Jak obraz tła na stronie h1 >
< P > Ten GIF został dodany Jak obraz tła na całej stronie za pomocą 'zdjęcie w tle' Nieruchomość. Ten artykuł został opracowany przez Linuxhint. P >
dz >

< dz >
< h3 styl = 'kolor biały;' > Treść napisana poza 'dział' element h3 >
dz >

W powyższym kodzie:

• • Najpierw rodzic „ ” tag jest używany z klasą „ zawierać ”.
  • Następnie użyj „ h1 ' I ' P ” Elementy HTML i dostarczać im fikcyjne treści.
  • Następnie utwórz kolejny „ ” i wykorzystać „

    ”, podając do niego fikcyjne dane.

Teraz dodaj GIF jako tło na stronie internetowej, wstawiając następujące właściwości CSS:

.contai {
obraz tła: url ( morze.gif ');
powtórzenie w tle: brak powtórzeń;
rozmiar tła: okładka;
wysokość: 100vh;
wyświetlacz: elastyczny;
elementy wyrównania: środek;
justify-content: środek;
kierunek zginania: kolumna;
kolor biały;
rozmiar czcionki: duży;
wyrównanie tekstu: środek;
wyściółka: 2rem;
}

Opis użytego powyżej bloku kodu:

• • Najpierw ustaw „ ścieżka obrazu ”, „ bez powtórzeń t” i „ okładka ” jako wartość dla CSS “ zdjęcie w tle ”, „ powtarzanie tła ' I ' rozmiar tła ”, odpowiednio.
  • Następnie ustaw wartość „ 100vh ' I ' przewód ” do CSS “ wysokość ' I ' wyświetlacz ' nieruchomości.
  • Następnie użyj CSS „ kolor ”, „ rozmiar czcionki ”, „ wyrównanie tekstu ' I ' wyściółka ”, aby zastosować stylizację do treści.

Strona po zakończeniu procesu kompilacji wygląda następująco:

Dane wyjściowe pokazują, że „ GIF-y ” został wstawiony jako obraz tła na całej stronie.

Wniosek

Aby ustawić GIF jako obraz tła na stronie internetowej, CSS „ zdjęcie w tle ”właściwość jest wykorzystywana w kodzie HTML” ciało ' element. Właściwość CSS zastosowana do elementu „body” jest automatycznie stosowana do wszystkich elementów zawierających. Ustawiając „ 100vh ” jako wartość właściwości height, można również włączyć efekt przewijania. Pozwala przesuwać gif w tle wzdłuż zwoju. W tym artykule pokazano, jak ustawić GIF jako obraz tła na stronie internetowej.