Stille inn GIF ' Graphics Interchange Format ” som bakgrunnsbilde tilfører designet et visuelt tiltalende element. GIF lar utviklere formidle informasjon eller fremheve et produkt eller en tjeneste som hjelper med å skape en merkevares visuelle identitet. Utviklerne må imidlertid sørge for at bruken av GIF-er ikke overvelder nettsiden eller distraherer brukeren fra hovedinnholdet.

Denne artikkelen demonstrerer prosedyren for å sette en GIF som bakgrunnsbilde på nettsiden.

Hvordan sette GIF som bakgrunnsbilde på nettsiden?

Å sette en GIF som bakgrunnsbilde hjelper deg med å lage iøynefallende elementer ved å legge til visuelle elementer.

GIF-er er spesielt nyttige på nettsteder som ønsker å formidle en følelse av lekenhet eller lunefullhet, eller på sider som ønsker å fremheve et bestemt produkt eller funksjon. For å angi det, som et bakgrunnsbilde, besøk følgende eksempler:

Eksempel 1: Sette GIF som en fast bakgrunn

Ettersom HTML-elementene som hjelper til med å bygge innholdet på nettsiden er plassert inne i ' ' stikkord. Derfor velger du ' kropp '-elementet og bruke CSS-egenskaper på det. Det påvirker alle HTML-elementene som inneholder ' ' stikkord.

For eksempel, '

' og '

'-tagger brukes som innholdet på nettsiden. Se kodebiten nedenfor:

< kropp >
< h1 > Innstilling av GIF som et bakgrunnsbilde på siden h1 >
< s > Denne GIF-en er lagt til som et bakgrunnsbilde på hele siden ved hjelp av 'bakgrunnsbilde' Eiendom. Denne artikkelen er drevet av Linuxhint. s >
kropp >

Velg nå 'body' HTML-elementet i ' ' tag eller i en separat ' CSS ' fil for å bruke stil på nettsiden:

kropp {
bakgrunnsbilde: url ( 'sea.gif' ) ;
bakgrunns-gjenta: ikke-gjenta;
bakgrunnsstørrelse: cover;
polstring:50px;
font-size: x-large;
farge: hvit;
}

I kodeblokken ovenfor:

• • Først, ' url() '-metoden brukes som lagrer banen til ' GIF ' fil. Og denne metoden sendes som en verdi til CSS ' bakgrunnsbilde ' eiendom.
  • Deretter setter du ' ingen gjentakelse ' som en verdi for CSS ' bakgrunnsgjenta ” egenskap for repetisjon av GIF-filen.
  • Sett deretter verdien på ' dekke ' til CSS ' bakgrunnsstørrelse ” eiendom for å dekke all tilgjengelig plass
  • Etter det, oppgi verdien av ' 50 piksler ' og ' x-stor ' til CSS ' polstring ' og ' skriftstørrelse ” eiendommer, henholdsvis. Dette legger til mellomrom rundt teksten og forstørrer skriftstørrelsen.

Etter kompileringen ser nettsiden slik ut:

Utdataene ovenfor viser at en gif er lagt til som bakgrunn på nettsiden.

Eksempel 2: Angi GIF som en rullbar bakgrunn

Opprett først en HTML-struktur for å lage innhold på en nettside som dette:

< div klasse = 'contai' >
< h1 > Innstilling av GIF som et bakgrunnsbilde på siden h1 >
< s > Denne GIF-en er lagt til som et bakgrunnsbilde på hele siden ved hjelp av 'bakgrunnsbilde' Eiendom. Denne artikkelen er drevet av Linuxhint. s >
div >

< div >
< h3 stil = 'farge:hvit;' > Innhold skrevet utenfor 'div' element h3 >
div >

I koden ovenfor:

• • Først forelderen '
    '-taggen brukes med en klasse ' inneholde '.
  • Deretter bruker du ' h1 ' og ' s HTML-elementer og gi dummy-innhold til dem.
  • Etter det oppretter du en annen '
    ' og bruk '

    ”-taggen ved å gi dummy-data til den.

Legg nå til GIF som bakgrunn på nettsiden ved å sette inn følgende CSS-egenskaper:

.contai {
bakgrunnsbilde: url ( sea.gif ');
bakgrunns-gjenta: ikke-gjenta;
bakgrunnsstørrelse: cover;
høyde: 100vh;
display: flex;
align-items: center;
rettferdiggjøre-innhold: senter;
flex-retning: kolonne;
farge: hvit;
skriftstørrelse: stor;
tekst-align: center;
polstring: 2rem;
}

Beskrivelsen av den ovenfor brukte kodeblokken:

• • Først setter du ' bilde-sti ', ' ingen gjentakelse t' og ' dekke ' som en verdi for CSS ' bakgrunnsbilde ', ' bakgrunnsgjenta ' og ' bakgrunnsstørrelse ” eiendommer, henholdsvis.
  • Deretter setter du verdien på ' 100vh ' og ' bøye seg ' til CSS ' høyde ' og ' vise ' egenskaper.
  • Etter det, bruk CSS ' farge ', ' skriftstørrelse ', ' tekstjustering ' og ' polstring egenskaper for å bruke styling på innholdet.

Etter slutten av kompileringsprosessen ser nettsiden slik ut:

Utgangen viser at ' GIF ” er satt inn som bakgrunnsbilde på hele siden.

Konklusjon

For å angi GIF som bakgrunnsbilde på nettsiden, CSS ' bakgrunnsbilde ' egenskapen brukes på HTML ' kropp ' element. CSS-egenskapen som brukes på 'body'-elementet, brukes automatisk på alle elementer som inneholder. Ved å stille inn ' 100vh ” som en verdi til høydeegenskapen, kan rulleeffekten også aktiveres. Den lar bakgrunns-gif-en bevege seg langs rullen. Denne artikkelen har vist hvordan du setter en GIF som bakgrunnsbilde på nettsiden.