Configuració del GIF ' Format d'intercanvi de gràfics ” com a imatge de fons afegeix un element visualment atractiu al disseny. GIF permet als desenvolupadors transmetre informació o destacar un producte o servei que ajuda a crear la identitat visual d'una marca. Tanmateix, els desenvolupadors han d'assegurar-se que l'ús de GIF no aclapara la pàgina web ni distregui l'usuari del contingut principal.

Aquest article mostra el procediment per configurar un GIF com a imatge de fons a la pàgina web.

Com configurar el GIF com a imatge de fons a la pàgina web?

Establir un GIF com a imatge de fons ajuda a crear elements atractius afegint elements visuals.

Els GIF són especialment útils en llocs web que volen transmetre una sensació d'alegria o caprici, o en pàgines que volen destacar un producte o funció en particular. Per configurar-lo, com a imatge de fons visiteu els exemples següents:

Exemple 1: Configurar GIF com a fons fix

A mesura que els elements HTML que ajuden a crear el contingut de la pàgina web es col·loquen dins del ' ' etiqueta. És per això que, seleccionant el ' cos ” i aplicant-hi propietats CSS. Afecta tots els elements HTML que contenen el ' ' etiqueta.

Per exemple, el '

' i '

Les etiquetes s'utilitzen com a contingut de la pàgina web. Vegeu el fragment de codi següent:

< cos >
< h1 > Configuració de GIF com una imatge de fons a la pàgina h1 >
< pàg > S'ha afegit aquest GIF com una imatge de fons a tota la pàgina utilitzant 'imatge de fons' Propietat. Aquest article ha estat impulsat per Linuxhint. pàg >
cos >

Ara, seleccioneu l'element HTML 'cos' dins del ' 'etiqueta o en una altra' CSS ” fitxer per aplicar l'estil a la pàgina web:

cos {
imatge de fons: url ( 'sigui.gif' ) ;
background-repeat: sense repetició;
mida de fons: coberta;
farciment: 50 píxels;
mida de la font: x-gran;
color: blanc;
}

Al bloc de codi anterior:

• • En primer lloc, el ' url() s'utilitza el mètode que emmagatzema el camí del ' GIF ' dossier. I aquest mètode es passa com a valor al CSS ' imatge de fons ' propietat.
  • A continuació, configureu ' no-repeat 'com a valor del CSS' fons-repetició ” propietat per a la repetició del fitxer GIF.
  • A continuació, estableix el valor de ' coberta ' al CSS ' mida de fons ” propietat per cobrir tot l'espai disponible
  • Després d'això, proporcioneu el valor de ' 50 píxels ' i ' x-gran ' al CSS ' farciment ' i ' mida de la font ” propietats, respectivament. Això afegeix espai al text i augmenta la mida de la lletra.

Després de la compilació, la pàgina web té aquest aspecte:

La sortida anterior mostra que s'ha afegit un gif com a fons a la pàgina web.

Exemple 2: Configuració de GIF com a fons desplaçable

Inicialment, creeu una estructura HTML per fer un contingut de pàgina web com aquest:

< div classe = 'contai' >
< h1 > Configuració de GIF com una imatge de fons a la pàgina h1 >
< pàg > S'ha afegit aquest GIF com una imatge de fons a tota la pàgina utilitzant el 'imatge de fons' Propietat. Aquest article ha estat impulsat per Linuxhint. pàg >
div >

< div >
< h3 estil = 'color: blanc;' > Contingut escrit fora de 'div' element h3 >
div >

En el codi anterior:

• • En primer lloc, els pares '
    L'etiqueta s'utilitza amb una classe de contenir ”.
  • A continuació, utilitzeu “ h1 ' i ' pàg ” Elements HTML i proporcionar-los contingut fictici.
  • Després d'això, creeu un altre '
    ' i utilitzeu el '

    ” proporcionant-li dades simulades.

Ara, afegiu GIF com a fons a la pàgina web inserint les propietats CSS següents:

.contai {
imatge de fons: url ( sea.gif ');
background-repeat: sense repetició;
mida de fons: coberta;
alçada: 100vh;
pantalla: flex;
elements d'alineació: centre;
justificar-contingut: centre;
flex-direcció: columna;
color: blanc;
mida del tipus de lletra: gran;
alineació de text: centre;
farciment: 2rem;
}

La descripció del bloc de codi utilitzat anteriorment:

• • Primer, configureu el ' camí-imatge ”, “ no-repeja t' i ' coberta 'com a valor del CSS' imatge de fons ”, “ fons-repetició ' i ' mida de fons ” propietats, respectivament.
  • A continuació, establiu el valor de ' 100vh ' i ' flexionar ' al CSS ' alçada ' i ' visualització ” propietats.
  • Després d'això, utilitzeu el CSS ' color ”, “ mida de la font ”, “ alineació de text ' i ' farciment ” propietats per aplicar l'estil al contingut.

Un cop finalitzat el procés de compilació, la pàgina web té aquest aspecte:

La sortida mostra que el ' GIF ” s'ha inserit com a imatge de fons a tota la pàgina.

Conclusió

Per configurar GIF com a imatge de fons a la pàgina web, el CSS ' imatge de fons La propietat s'utilitza a l'HTML cos ” element. La propietat CSS que s'aplica a l'element 'body' s'aplica automàticament a tots els elements que el contenen. En configurar el ' 100vh ” com a valor de la propietat d'alçada, també es pot activar l'efecte de desplaçament. Permet que el gif de fons es mogui al llarg del desplaçament. Aquest article ha demostrat com configurar un GIF com a imatge de fons a la pàgina web.