Nastavení GIF ' Formát výměny grafiky “ jako obrázek na pozadí dodává designu vizuálně přitažlivý prvek. GIF umožňuje vývojářům předat informace nebo upozornit na produkt nebo službu, což pomáhá při vytváření vizuální identity značky. Vývojáři však musí zajistit, aby použití GIF nezahltilo webovou stránku nebo neodvádělo pozornost uživatele od hlavního obsahu.

Tento článek ukazuje postup nastavení obrázku GIF jako obrázku na pozadí na webové stránce.

Jak nastavit GIF jako obrázek na pozadí na webové stránce?

Nastavení obrázku GIF jako obrázku na pozadí pomáhá při vytváření poutavých prvků přidáním vizuálních prvků.

GIFy jsou užitečné zejména na webových stránkách, které chtějí zprostředkovat pocit hravosti nebo rozmaru, nebo na stránkách, které chtějí upozornit na konkrétní produkt nebo funkci. Chcete-li jej nastavit jako obrázek na pozadí, navštivte následující příklady:

Příklad 1: Nastavení GIF jako pevného pozadí

Protože prvky HTML, které pomáhají při vytváření obsahu webové stránky, jsou umístěny uvnitř „ ” tag. Proto výběrem možnosti „ tělo ” a použití vlastností CSS na něj. Ovlivňuje všechny prvky HTML obsahující „ ” tag.

Například „

' a '

” tagy se používají jako obsah webové stránky. Viz níže uvedený fragment kódu:

< tělo >
< h1 > Nastavení GIF tak jako Obrázek na pozadí na stránce h1 >
< p > Tento GIF byl přidán tak jako pomocí obrázku na pozadí na celé stránce 'obrázek na pozadí' Vlastnictví. Tento článek je založen na Linuxhint. p >
tělo >

Nyní vyberte prvek HTML „body“ uvnitř „ ” tag nebo v samostatném “ CSS ” soubor pro použití stylů na webové stránce:

tělo {
obrázek na pozadí: url ( 'sea.gif' ) ;
background-repeat: no-repeat;
background-size: cover;
padding:50px;
font-size: x-large;
barva bílá;
}

Ve výše uvedeném bloku kódu:

• • Za prvé, „ url() používá se metoda, která ukládá cestu souboru GIF “. A tato metoda je předána jako hodnota do CSS “ obrázek na pozadí ' vlastnictví.
  • Dále nastavte „ ne-opakovat “ jako hodnotu pro CSS “ pozadí-opakování ” vlastnost pro opakování souboru GIF.
  • Poté nastavte hodnotu „ Pokrýt “ do CSS “ velikost pozadí “, aby pokryl veškerý dostupný prostor
  • Poté zadejte hodnotu „ 50 pixelů ' a ' x-velký “ do CSS “ vycpávka ' a ' velikost písma “ vlastnosti, resp. Tím se přidá mezera kolem textu a zvětší se velikost písma.

Po kompilaci vypadá webová stránka takto:

Výše uvedený výstup ukazuje, že jako pozadí na webovou stránku byl přidán gif.

Příklad 2: Nastavení GIF jako rolovatelného pozadí

Nejprve vytvořte strukturu HTML, abyste vytvořili obsah webové stránky takto:

< div třída = 'obsahuje' >
< h1 > Nastavení GIF tak jako Obrázek na pozadí na stránce h1 >
< p > Tento GIF byl přidán tak jako obrázek na pozadí na celé stránce pomocí 'obrázek na pozadí' Vlastnictví. Tento článek je založen na Linuxhint. p >
div >

< div >
< h3 styl = 'barva bílá;' > Obsah napsaný mimo 'div' živel h3 >
div >

Ve výše uvedeném kódu:

• • Za prvé, rodič'
    Značka ” se používá s třídou “ obsahovat “.
  • Dále použijte „ h1 ' a ' p ” HTML prvky a poskytují jim fiktivní obsah.
  • Poté vytvořte další „
    “ a použijte „

    ” poskytnutím fiktivních dat.

Nyní přidejte GIF jako pozadí na webovou stránku vložením následujících vlastností CSS:

.obsahují {
obrázek na pozadí: url ( moře.gif ');
background-repeat: no-repeat;
background-size: cover;
výška: 100vh;
displej: flex;
align-items: center;
justify-content: center;
směr ohybu: sloupec;
barva bílá;
velikost písma: velká;
text-align: center;
polstrování: 2rem;
}

Popis výše použitého bloku kódu:

• • Nejprve nastavte „ obrazová cesta “, “ ne-opakovat t“ a „ Pokrýt “ jako hodnotu pro CSS “ obrázek na pozadí “, “ pozadí-opakování ' a ' velikost pozadí “ vlastnosti, resp.
  • Dále nastavte hodnotu „ 100vh ' a ' flex “ do CSS “ výška ' a ' Zobrazit vlastnosti.
  • Poté použijte CSS “ barva “, “ velikost písma “, “ zarovnání textu ' a ' vycpávka ” vlastnosti pro použití stylů na obsah.

Po dokončení procesu kompilace vypadá webová stránka takto:

Výstup zobrazuje, že „ GIF “ byl vložen jako obrázek na pozadí na celou stránku.

Závěr

Chcete-li nastavit GIF jako obrázek na pozadí webové stránky, CSS „ obrázek na pozadí “ vlastnost se používá v HTML “ tělo prvek. Vlastnost CSS, která se použije na prvek „body“, se automaticky použije na všechny prvky, které obsahují. Nastavením „ 100vh ” jako hodnotu vlastnosti height lze také povolit efekt rolování. Umožňuje, aby se gif na pozadí pohyboval po rolování. Tento článek ukazuje, jak nastavit GIF jako obrázek na pozadí na webové stránce.