Ställa in GIF ' Graphics Interchange Format ” som bakgrundsbild lägger till ett visuellt tilltalande element till designen. GIF tillåter utvecklare att förmedla information eller lyfta fram en produkt eller tjänst som hjälper till att skapa ett varumärkes visuella identitet. Utvecklarna måste dock se till att användningen av GIF:er inte överväldigar webbsidan eller distraherar användaren från huvudinnehållet.

Den här artikeln visar proceduren för att ställa in en GIF som bakgrundsbild på webbsidan.

Hur ställer jag in GIF som en bakgrundsbild på webbsidan?

Att ställa in en GIF som bakgrundsbild hjälper till att skapa iögonfallande element genom att lägga till visuella element.

GIF:er är särskilt användbara på webbplatser som vill förmedla en känsla av lekfullhet eller nyckfullhet, eller på sidor som vill lyfta fram en viss produkt eller funktion. För att ställa in den, som bakgrundsbild, besök följande exempel:

Exempel 1: Ställ in GIF som en fast bakgrund

Eftersom HTML-elementen som hjälper till att bygga innehållet på webbsidan placeras i ' '-tagg. Det är därför du väljer ' kropp ”-element och tillämpa CSS-egenskaper på det. Det påverkar alla HTML-element som innehåller ' '-tagg.

Till exempel, '

' och '

”-taggar används som innehållet på webbsidan. Se kodavsnittet nedan:

< kropp >
< h1 > Ställa in GIF som en bakgrundsbild på sidan h1 >
< sid > Denna GIF har lagts till som en bakgrundsbild på hela sidan med hjälp av 'bakgrundsbild' Fast egendom. Den här artikeln har drivits av Linuxhint. sid >
kropp >

Välj nu HTML-elementet 'kropp' i ' '-tagg eller i en separat ' CSS ” fil för att tillämpa stil på webbsidan:

kropp {
bakgrundsbild: url ( 'sea.gif' ) ;
bakgrundsupprepning: ingen upprepning;
bakgrundsstorlek: omslag;
stoppning:50px;
font-size: x-large;
färg vit;
}

I ovanstående kodblock:

• • Först, ' url() ”-metoden används som lagrar sökvägen till ” GIF ' fil. Och denna metod skickas som ett värde till CSS ' bakgrundsbild ' fast egendom.
  • Ställ sedan in ' ingen upprepning ' som ett värde för CSS ' bakgrund-upprepa ” egenskap för upprepning av GIF-filen.
  • Ställ sedan in värdet på ' omslag ' till CSS ' bakgrundsstorlek ” egendom för att täcka allt tillgängligt utrymme
  • Efter det, ange värdet av ' 50 px ' och ' extra stor ' till CSS ' stoppning ' och ' textstorlek ” fastigheter respektive. Detta lägger till mellanrum runt texten och förstorar teckenstorleken.

Efter sammanställningen ser webbsidan ut så här:

Ovanstående utdata visar att en gif har lagts till som bakgrund på webbsidan.

Exempel 2: Ställ in GIF som en rullningsbar bakgrund

Skapa först en HTML-struktur för att skapa en webbsidas innehåll så här:

< div klass = 'contai' >
< h1 > Ställa in GIF som en bakgrundsbild på sidan h1 >
< sid > Denna GIF har lagts till som en bakgrundsbild på hela sidan med hjälp av 'bakgrundsbild' Fast egendom. Den här artikeln har drivits av Linuxhint. sid >
div >

< div >
< h3 stil = 'färg vit;' > Innehåll skrivet utanför 'div' element h3 >
div >

I ovanstående kod:

• • Först, föräldern '
    '-taggen används med en klass av ' innehålla ”.
  • Använd sedan ' h1 ' och ' sid HTML-element och tillhandahålla dummy-innehåll till dem.
  • Efter det skapar du en annan '
    ' och använda '

    ”-taggen genom att tillhandahålla dummydata till den.

Lägg nu till GIF som bakgrund på webbsidan genom att infoga följande CSS-egenskaper:

.contai {
bakgrundsbild: url ( sea.gif ');
bakgrundsupprepning: ingen upprepad;
bakgrundsstorlek: omslag;
höjd: 100vh;
display: flex;
align-items: center;
motivera-innehåll: center;
flex-riktning: kolumn;
färg vit;
teckenstorlek: stor;
text-align: center;
stoppning: 2rem;
}

Beskrivningen av det ovan använda kodblocket:

• • Ställ först in ' bild-väg ”, “ ingen upprepning t' och ' omslag ' som ett värde för CSS ' bakgrundsbild ”, “ bakgrund-upprepa ' och ' bakgrundsstorlek ” fastigheter respektive.
  • Ställ sedan in värdet på ' 100vh ' och ' böja ' till CSS ' höjd ' och ' visa ' egenskaper.
  • Efter det, använd CSS ' Färg ”, “ textstorlek ”, “ textjustera ' och ' stoppning ” egenskaper för att tillämpa stil på innehållet.

Efter slutet av kompileringsprocessen ser webbsidan ut så här:

Utgången visar att ' GIF ” har infogats som bakgrundsbild på hela sidan.

Slutsats

För att ställa in GIF som bakgrundsbild på webbsidan, CSS ' bakgrundsbild 'egenskapen används på HTML' kropp ' element. CSS-egenskapen som tillämpas på elementet 'body' tillämpas automatiskt på alla element som innehåller. Genom att ställa in ' 100vh ” som ett värde för egenskapen height kan rullningseffekten också aktiveras. Det gör att bakgrunds-gifen kan flyttas längs med rullningen. Den här artikeln har visat hur man ställer in en GIF som bakgrundsbild på webbsidan.