De GIF instellen ' Grafisch uitwisselingsformaat ” als achtergrondafbeelding voegt een visueel aantrekkelijk element toe aan het ontwerp. Met GIF kunnen ontwikkelaars informatie overbrengen of een product of dienst benadrukken die helpt bij het creëren van de visuele identiteit van een merk. De ontwikkelaars moeten er echter voor zorgen dat het gebruik van GIF's de webpagina niet overweldigt of de gebruiker afleidt van de hoofdinhoud.

Dit artikel demonstreert de procedure voor het instellen van een GIF als achtergrondafbeelding op de webpagina.

Hoe stel je GIF in als achtergrondafbeelding op de webpagina?

Het instellen van een GIF als achtergrondafbeelding helpt bij het creëren van opvallende elementen door visuele elementen toe te voegen.

GIF's zijn vooral handig op websites die een gevoel van speelsheid of eigenzinnigheid willen overbrengen, of op pagina's die een bepaald product of een bepaald kenmerk willen benadrukken. Ga voor het instellen als achtergrondafbeelding naar de volgende voorbeelden:

Voorbeeld 1: GIF instellen als vaste achtergrond

Omdat de HTML-elementen die helpen bij het bouwen van de inhoud van de webpagina in de ' ' label. Daarom is het selecteren van de “ lichaam ”-element en pas er CSS-eigenschappen op toe. Het beïnvloedt alle bevattende HTML-elementen van de ' ' label.

Bijvoorbeeld de '

' En '

”Tags worden gebruikt als de inhoud van de webpagina. Zie het onderstaande codefragment:

< lichaam >
< h1 > GIF instellen als een achtergrondafbeelding op de pagina h1 >
< P > Deze GIF is toegevoegd als een achtergrondafbeelding op de hele pagina gebruiken 'achtergrond afbeelding' Eigendom. Dit artikel is mogelijk gemaakt door Linuxhint. P >
lichaam >

Selecteer nu het HTML-element 'body' in de ' ' tag of in een aparte ' CSS ”-bestand om styling toe te passen op de webpagina:

lichaam {
achtergrondafbeelding: url ( 'zee.gif' ) ;
achtergrondherhaling: geen herhaling;
achtergrondformaat: omslag;
opvulling:50px;
lettergrootte: x-groot;
kleur wit;
}

In het bovenstaande codeblok:

• • Eerst de ' url() ” methode wordt gebruikt die het pad van de “ GIF ' bestand. En deze methode wordt als waarde doorgegeven aan de CSS “ achtergrond afbeelding ' eigendom.
  • Stel vervolgens ' geen herhaling ” als waarde voor de CSS “ achtergrond herhaling ” eigenschap voor de herhaling van het GIF-bestand.
  • Stel vervolgens de waarde in van ' omslag ” naar de CSS “ achtergrondformaat ” eigenschap om alle beschikbare ruimte te dekken
  • Geef daarna de waarde op van ' 50px ' En ' x-groot ” naar de CSS “ opvulling ' En ' lettertypegrootte ” eigenschappen, respectievelijk. Dit voegt ruimte rond de tekst toe en vergroot de lettergrootte.

Na het samenstellen ziet de webpagina er als volgt uit:

Bovenstaande uitvoer laat zien dat er een gif is toegevoegd als achtergrond op de webpagina.

Voorbeeld 2: GIF instellen als schuifbare achtergrond

Maak in eerste instantie een HTML-structuur om de inhoud van een webpagina als volgt te maken:

< div klas = 'bevat' >
< h1 > GIF instellen als een achtergrondafbeelding op de pagina h1 >
< P > Deze GIF is toegevoegd als een achtergrondafbeelding op de hele pagina met behulp van de 'achtergrond afbeelding' Eigendom. Dit artikel is mogelijk gemaakt door Linuxhint. P >
div >

< div >
< h3 stijl = 'kleur wit;' > Inhoud geschreven buiten de 'div' element h3 >
div >

In bovenstaande code:

• • Eerst de ouder “
    ” tag wordt gebruikt met een klasse van “ bevatten ”.
  • Gebruik vervolgens ' h1 ' En ' P ” HTML-elementen en geef ze dummy-inhoud.
  • Maak daarna nog een '
    ' en gebruik de '

    ”-tag door er dummy-gegevens aan te verstrekken.

Voeg nu GIF toe als achtergrond op de webpagina door de volgende CSS-eigenschappen in te voegen:

.contai {
achtergrondafbeelding: url ( zee.gif ');
achtergrondherhaling: geen herhaling;
achtergrondformaat: omslag;
hoogte: 100vh;
weergeven: flex;
items uitlijnen: centreren;
rechtvaardigen-inhoud: centrum;
flex-richting: kolom;
kleur wit;
lettergrootte: groot;
tekst uitlijnen: centreren;
vulling: 2rem;
}

De beschrijving van het hierboven gebruikte codeblok:

• • Stel eerst de ' afbeelding-pad ”, “ geen herhaling t' en ' omslag ” als waarde voor de CSS “ achtergrond afbeelding ”, “ achtergrond herhaling ' En ' achtergrondformaat ” eigenschappen, respectievelijk.
  • Stel vervolgens de waarde in van ' 100vh ' En ' buigen ” naar de CSS “ hoogte ' En ' weergave ' eigenschappen.
  • Gebruik daarna de CSS ' kleur ”, “ lettertypegrootte ”, “ tekst uitlijnen ' En ' opvulling ” eigenschappen om styling toe te passen op de inhoud.

Na het einde van het compilatieproces ziet de webpagina er als volgt uit:

De uitvoer geeft aan dat de ' GIF ” is ingevoegd als achtergrondafbeelding op de hele pagina.

Conclusie

Om GIF in te stellen als achtergrondafbeelding op de webpagina, de CSS ' achtergrond afbeelding ” eigendom wordt gebruikt op de HTML “ lichaam ”-element. De CSS-eigenschap die wordt toegepast op het 'body'-element wordt automatisch toegepast op alle bevattende elementen. Door het instellen van de ' 100vh ” als een waarde voor de eigenschap height, kan het scroleffect ook worden ingeschakeld. Hiermee kan de achtergrond-gif langs de scroll bewegen. Dit artikel heeft laten zien hoe je een GIF instelt als achtergrondafbeelding op de webpagina.