Indstilling af GIF ' Graphics Interchange Format ” som baggrundsbillede tilføjer et visuelt tiltalende element til designet. GIF giver udviklere mulighed for at formidle information eller fremhæve et produkt eller en tjeneste, som hjælper med at skabe et brands visuelle identitet. Udviklerne skal dog sikre, at brugen af ​​GIF'er ikke overvælder websiden eller distraherer brugeren fra hovedindholdet.

Denne artikel demonstrerer proceduren for at indstille en GIF som baggrundsbillede på websiden.

Hvordan indstilles GIF som baggrundsbillede på websiden?

Indstilling af en GIF som baggrundsbillede hjælper med at skabe iøjnefaldende elementer ved at tilføje visuelle elementer.

GIF'er er særligt nyttige på websteder, der ønsker at formidle en følelse af legesyg eller lune, eller på sider, der ønsker at fremhæve et bestemt produkt eller en bestemt funktion. For at indstille det, som et baggrundsbillede, besøg følgende eksempler:

Eksempel 1: Indstilling af GIF som en fast baggrund

Da HTML-elementerne, der hjælper med at opbygge indholdet af websiden, er placeret inde i ' ” tag. Det er derfor, at vælge ' legeme ” element og anvende CSS-egenskaber på det. Det påvirker alle de indeholdende HTML-elementer i ' ” tag.

For eksempel '

' og '

” tags bruges som indholdet af websiden. Se nedenstående kodestykke:

< legeme >
< h1 > Indstilling af GIF som et baggrundsbillede på siden h1 >
< s > Denne GIF er blevet tilføjet som et baggrundsbillede på hele siden vha 'baggrundsbillede' Ejendom. Denne artikel er blevet drevet af Linuxhint. s >
legeme >

Vælg nu 'body' HTML-elementet inde i ' ' tag eller i et separat ' CSS ” fil for at anvende stil på websiden:

legeme {
baggrundsbillede: url ( 'sea.gif' ) ;
baggrund-gentag: ingen gentagelse;
baggrundsstørrelse: cover;
polstring:50px;
font-size: x-large;
farve: hvid;
}

I ovenstående kodeblok:

• • For det første ' url() '-metoden bruges, som gemmer stien til ' GIF ' fil. Og denne metode overføres som en værdi til CSS ' baggrundsbillede ” ejendom.
  • Indstil derefter ' ingen gentagelse ' som en værdi for CSS ' baggrund-gentag ” egenskab til gentagelse af GIF-filen.
  • Indstil derefter værdien af ​​' dække over ' til CSS ' baggrundsstørrelse ” ejendom til at dække al den tilgængelige plads
  • Angiv derefter værdien af ​​' 50 px ' og ' x-stor ' til CSS ' polstring ' og ' skriftstørrelse ” ejendomme, hhv. Dette tilføjer mellemrum omkring teksten og forstørrer skriftstørrelsen.

Efter kompileringen ser websiden sådan ud:

Ovenstående output viser, at en gif er blevet tilføjet som baggrund på websiden.

Eksempel 2: Indstilling af GIF som en rulbar baggrund

Til at begynde med skal du oprette en HTML-struktur for at lave et websideindhold som dette:

< div klasse = 'contai' >
< h1 > Indstilling af GIF som et baggrundsbillede på siden h1 >
< s > Denne GIF er blevet tilføjet som et baggrundsbillede på hele siden ved hjælp af 'baggrundsbillede' Ejendom. Denne artikel er blevet drevet af Linuxhint. s >
div >

< div >
< h3 stil = 'farve:hvid;' > Indhold skrevet uden for 'div' element h3 >
div >

I ovenstående kode:

• • For det første forælderen '
    ' tag bruges med en klasse af ' indeholde ”.
  • Brug derefter ' h1 ' og ' s HTML-elementer og give dummy-indhold til dem.
  • Derefter skal du oprette en anden '
    ' og brug '

    ” tag ved at give dummy-data til det.

Tilføj nu GIF som baggrund på websiden ved at indsætte følgende CSS-egenskaber:

.contai {
baggrundsbillede: url ( hav.gif ');
baggrund-gentag: ingen-gentagelse;
baggrundsstørrelse: cover;
højde: 100vh;
display: flex;
align-items: center;
retfærdiggøre-indhold: center;
flex-retning: kolonne;
farve: hvid;
skriftstørrelse: stor;
tekst-align: center;
polstring: 2rem;
}

Beskrivelsen af ​​den ovenfor anvendte kodeblok:

• • Først skal du indstille ' billedsti ', ' ingen gentagelse t' og ' dække over ' som en værdi for CSS ' baggrundsbillede ', ' baggrund-gentag ' og ' baggrundsstørrelse ” ejendomme, hhv.
  • Indstil derefter værdien af ​​' 100vh ' og ' bøje ' til CSS ' højde ' og ' Skærm ' ejendomme.
  • Brug derefter CSS ' farve ', ' skriftstørrelse ', ' tekstjustering ' og ' polstring ” egenskaber til at anvende styling på indholdet.

Efter afslutningen af ​​kompileringsprocessen ser websiden sådan ud:

Udgangen viser, at ' GIF ” er indsat som baggrundsbillede på hele siden.

Konklusion

For at indstille GIF som baggrundsbillede på websiden skal CSS ' baggrundsbillede 'egenskaben bruges på HTML' legeme ' element. CSS-egenskaben, der anvendes på 'body'-elementet, anvendes automatisk på alle indeholdende elementer. Ved at indstille ' 100vh ” som en værdi til egenskaben højde, kan rulleeffekten også aktiveres. Det tillader baggrunds-gif'en at bevæge sig langs rullen. Denne artikel har vist, hvordan man indstiller en GIF som baggrundsbillede på websiden.