Impostazione della GIF ' Formato di interscambio grafico ” come immagine di sfondo aggiunge un elemento visivamente accattivante al design. GIF consente agli sviluppatori di trasmettere informazioni o evidenziare un prodotto o servizio che aiuta a creare l'identità visiva di un marchio. Tuttavia, gli sviluppatori devono garantire che l'utilizzo delle GIF non sovrastimi la pagina Web o distragga l'utente dal contenuto principale.

Questo articolo illustra la procedura per impostare una GIF come immagine di sfondo nella pagina web.

Come impostare GIF come immagine di sfondo sulla pagina Web?

L'impostazione di una GIF come immagine di sfondo aiuta a creare elementi accattivanti aggiungendo elementi visivi.

Le GIF sono particolarmente utili su siti web che vogliono trasmettere un senso di giocosità o fantasia, o su pagine che vogliono evidenziare un particolare prodotto o caratteristica. Per impostarlo, come immagine di sfondo visita i seguenti esempi:

Esempio 1: impostazione di GIF come sfondo fisso

Poiché gli elementi HTML che aiutano a costruire il contenuto della pagina Web vengono inseriti all'interno del ' etichetta '. Ecco perché, selezionando il ' corpo ” e applicando le proprietà CSS su di esso. Colpisce tutti gli elementi HTML contenenti del ' etichetta '.

Ad esempio, il “

' E '

I tag 'sono utilizzati come contenuto della pagina web. Vedi il seguente frammento di codice:

< corpo >
< h1 > Impostazione GIF COME un'immagine di sfondo sulla pagina h1 >
< P > Questa GIF è stata aggiunta COME un'immagine di sfondo su tutta la pagina utilizzando 'immagine di sfondo' Proprietà. Questo articolo è stato fornito da Linuxhint. P >
corpo >

Ora, seleziona l'elemento HTML 'body' all'interno del ' ” tag o in un separato “ CSS ” file per applicare lo stile alla pagina web:

corpo {
immagine di sfondo: url ( 'mare.gif' ) ;
background-repeat: nessuna ripetizione;
dimensione dello sfondo: copertina;
imbottitura: 50px;
dimensione carattere: x-large;
colore bianco;
}

Nel blocco di codice sopra:

• • Prima il ' URL() ” viene utilizzato il metodo che memorizza il percorso del “ GIF ' file. E questo metodo viene passato come valore al CSS ' immagine di sfondo ' proprietà.
  • Successivamente, imposta ' senza ripetizione ” come valore per il CSS “ sfondo-ripetizione ” proprietà per la ripetizione del file GIF.
  • Quindi, imposta il valore di ' copertina ” al CSS “ dimensione dello sfondo ” proprietà per coprire tutto lo spazio disponibile
  • Successivamente, fornire il valore di ' 50 pixel ' E ' x-grande ” al CSS “ imbottitura ' E ' dimensione del font ” proprietà, rispettivamente. Questo aggiunge spaziatura intorno al testo e ingrandisce la dimensione del carattere.

Dopo la compilazione, la pagina web si presenta così:

L'output sopra mostra che una gif è stata aggiunta come sfondo sulla pagina web.

Esempio 2: impostazione di GIF come sfondo scorrevole

Inizialmente, crea una struttura HTML per rendere il contenuto di una pagina Web come questo:

< div classe = 'contai' >
< h1 > Impostazione GIF COME un'immagine di sfondo sulla pagina h1 >
< P > Questa GIF è stata aggiunta COME un'immagine di sfondo su tutta la pagina utilizzando il 'immagine di sfondo' Proprietà. Questo articolo è stato fornito da Linuxhint. P >
div >

< div >
< h3 stile = 'colore bianco;' > Contenuto scritto al di fuori del 'div' elemento h3 >
div >

Nel codice sopra:

• • Primo, il genitore”
    Il tag 'è utilizzato con una classe di' contenere ”.
  • Quindi, usa ' h1 ' E ' P ” Elementi HTML e fornire loro contenuti fittizi.
  • Successivamente, creane un altro '
    ” e utilizzare il “

    ” fornendo dati fittizi.

Ora aggiungi GIF come sfondo alla pagina web inserendo le seguenti proprietà CSS:

.contai {
immagine di sfondo: url ( mare.gif ');
background-repeat: nessuna ripetizione;
dimensione dello sfondo: copertina;
altezza: 100 vh;
display: flessibile;
align-items: centro;
giustifica-contenuto: centro;
direzione flessibile: colonna;
colore bianco;
dimensione carattere: grande;
text-align: centro;
imbottitura: 2rem;
}

La descrizione del blocco di codice utilizzato sopra:

• • Innanzitutto, imposta il ' percorso immagine ”, “ senza ripetizione t' e ' copertina ” come valore per il CSS “ immagine di sfondo ”, “ sfondo-ripetizione ' E ' dimensione dello sfondo ” proprietà, rispettivamente.
  • Successivamente, imposta il valore di ' 100 vh ' E ' flettere ” al CSS “ altezza ' E ' Schermo ' proprietà.
  • Successivamente, utilizza il CSS ' colore ”, “ dimensione del font ”, “ allineamento del testo ' E ' imbottitura ” per applicare lo stile al contenuto.

Dopo la fine del processo di compilazione, la pagina web si presenta così:

L'output mostra che ' GIF ” è stato inserito come immagine di sfondo su tutta la pagina.

Conclusione

Per impostare GIF come immagine di sfondo sulla pagina Web, il CSS ' immagine di sfondo 'la proprietà è utilizzata sull'HTML' corpo elemento '. La proprietà CSS che viene applicata all'elemento 'body' viene applicata automaticamente a tutti gli elementi che lo contengono. Impostando il ' 100 vh ” come valore della proprietà height, è possibile abilitare anche l'effetto di scorrimento. Permette alla gif di sfondo di muoversi lungo lo scroll. Questo articolo ha dimostrato come impostare una GIF come immagine di sfondo nella pagina web.