Setarea GIF-ului „ Format de schimb grafic ” ca imagine de fundal adaugă un element atrăgător din punct de vedere vizual designului. GIF permite dezvoltatorilor să transmită informații sau să evidențieze un produs sau serviciu care ajută la crearea identității vizuale a unei mărci. Cu toate acestea, dezvoltatorii trebuie să se asigure că utilizarea GIF-urilor nu copleșește pagina web și nu distrage atenția utilizatorului de la conținutul principal.

Acest articol demonstrează procedura de setare a unui GIF ca imagine de fundal pe pagina web.

Cum să setați GIF ca imagine de fundal pe pagina web?

Setarea unui GIF ca imagine de fundal ajută la crearea unor elemente atrăgătoare prin adăugarea de elemente vizuale.

GIF-urile sunt deosebit de utile pe site-urile web care doresc să transmită un sentiment de distracție sau capriciu, sau pe paginile care doresc să evidențieze un anumit produs sau caracteristică. Pentru setare, ca imagine de fundal, vizitați următoarele exemple:

Exemplul 1: Setarea GIF ca fundal fix

Deoarece elementele HTML care ajută la construirea conținutului paginii web sunt plasate în interiorul „ ' etichetă. De aceea, selectând „ corp ” și aplicând proprietăți CSS asupra acestuia. Afectează toate elementele HTML care conțin din „ ' etichetă.

De exemplu, „

' și '

” etichetele sunt utilizate ca conținut al paginii web. Vedeți fragmentul de cod de mai jos:

< corp >
< h1 > Setarea GIF la fel de o imagine de fundal pe pagină h1 >
< p > Acest GIF a fost adăugat la fel de o imagine de fundal pe întreaga pagină folosind 'imagine de fundal' Proprietate. Acest articol a fost dezvoltat de Linuxhint. p >
corp >

Acum, selectați elementul HTML „corp” din interiorul „ „etichetă sau într-un „ separat CSS ” pentru a aplica stilul pe pagina web:

corp {
imagine de fundal: url ( „sea.gif” ) ;
background-repeat: fără repetare;
dimensiunea fundalului: coperta;
umplutură: 50px;
dimensiunea fontului: x-mari;
culoare albă;
}

În blocul de cod de mai sus:

• • În primul rând, „ url() ” este utilizată metoda care stochează calea “ GIF ” dosar. Și această metodă este transmisă ca valoare către CSS „ imagine de fundal ” proprietate.
  • Apoi, setați „ fără repetare ” ca valoare pentru CSS ” fundal-repetare ” proprietate pentru repetarea fișierului GIF.
  • Apoi, setați valoarea „ acoperi ” la CSS ” dimensiunea fundalului ” proprietate pentru a acoperi tot spațiul disponibil
  • După aceea, furnizați valoarea „ 50px ' și ' extra larg ” la CSS ” căptușeală ' și ' marimea fontului ” proprietăți, respectiv. Aceasta adaugă spațiere în jurul textului și mărește dimensiunea fontului.

După compilare, pagina web arată astfel:

Rezultatul de mai sus arată că un gif a fost adăugat ca fundal pe pagina web.

Exemplul 2: Setarea GIF ca fundal care poate fi derulat

Inițial, creați o structură HTML pentru a crea un conținut de pagină web ca acesta:

< div clasă = 'contai' >
< h1 > Setarea GIF la fel de o imagine de fundal pe pagină h1 >
< p > Acest GIF a fost adăugat la fel de o imagine de fundal pe întreaga pagină folosind 'imagine de fundal' Proprietate. Acest articol a fost dezvoltat de Linuxhint. p >
div >

< div >
< h3 stil = 'culoare albă;' > Conținut scris în afara 'div' element h3 >
div >

În codul de mai sus:

• • În primul rând, părintele „
    Eticheta ” este utilizată cu o clasă de ” conține ”.
  • Apoi, utilizați „ h1 ' și ' p ” Elemente HTML și le oferă conținut inactiv.
  • După aceea, creați un alt „
    ” și utilizați „

    ” etichetă oferindu-i date fictive.

Acum, adăugați GIF ca fundal pe pagina web inserând următoarele proprietăți CSS:

.contai {
imagine de fundal: url ( mare.gif ');
background-repeat: fără repetare;
dimensiunea fundalului: coperta;
inaltime: 100vh;
display: flex;
alinierea elementelor: centru;
justificare-conținut: centru;
flex-direcție: coloană;
culoare albă;
dimensiunea fontului: mare;
text-align: centru;
captuseala: 2rem;
}

Descrierea blocului de cod utilizat mai sus:

• • Mai întâi, setați „ cale-imagine ”, “ fără repetare t” și „ acoperi ” ca valoare pentru CSS ” imagine de fundal ”, “ fundal-repetare ' și ' dimensiunea fundalului ” proprietăți, respectiv.
  • Apoi, setați valoarea „ 100vh ' și ' contracta ” la CSS ” înălţime ' și ' afişa ” proprietăți.
  • După aceea, utilizați CSS „ culoare ”, “ marimea fontului ”, “ aliniere text ' și ' căptușeală ” proprietăți pentru a aplica stilul conținutului.

După încheierea procesului de compilare, pagina web arată astfel:

Ieșirea afișează că „ GIF ” a fost inserat ca imagine de fundal pe întreaga pagină.

Concluzie

Pentru a seta GIF ca imagine de fundal pe pagina web, CSS „ imagine de fundal „proprietatea este utilizată pe HTML „ corp ' element. Proprietatea CSS care este aplicată elementului „corp” este aplicată automat tuturor elementelor care le conţin. Prin setarea „ 100vh ” ca valoare a proprietății înălțime, efectul de defilare poate fi, de asemenea, activat. Permite mișcarea gif-ului de fundal de-a lungul derulării. Acest articol a demonstrat cum să setați un GIF ca imagine de fundal pe pagina web.