Come avere un file GIF come immagine di sfondo

September 13

Un file GIF contiene un'immagine compressa per l'uso su Internet. Alcune immagini GIF sono animate, e giocheranno automaticamente quando incorporato in una pagina web. Un'immagine GIF può essere utilizzato come immagine di sfondo su una pagina web. È possibile controllare la sua piastrelle, il collocamento, e scorrere il comportamento sulla pagina web utilizzando il codice CSS in linea in un documento HTML regolare.

istruzione

1 Inserire il codice seguente tra i tag <head> del documento HTML, sostituendo "images / file.gif" con il percorso del file GIF:

<Style type = "text / css">

corpo

{

background-image: URL ( "images / file.gif");

}

</ Style>

2 Aggiungere la seguente riga al di sotto della linea "background-image" per rimuovere il comportamento piastrelle dell'immagine di sfondo:

background-repeat: no-repeat;

Utilizzare "repeat-x" o "repeat-y" al posto di "no-repeat" per affiancare l'immagine in orizzontale o in verticale, rispettivamente.

3 Utilizzare il seguente codice per posizionare il GIF nel mezzo dello sfondo della pagina:

background-position: Centro;

Utilizzare "in alto a sinistra", "centro-sinistra", "in basso a sinistra", "in alto a destra", "centro-destra", "in basso a destra", "top center" o "in basso al centro" per l'immagine lungo i bordi o nelle angoli della pagina. Utilizzare coordinate pixel o percentuali per inserire l'immagine in modo arbitrario. Ad esempio, questa riga inserire l'immagine 100 pixel dalla parte superiore della pagina, a filo con il lato sinistro:

background-position: 0px 100px;

I tipi di posizionamento possono essere miscelati insieme così. Ad esempio, la seguente riga centrare l'immagine orizzontalmente, un terzo dell'altezza della pagina dall'alto:

background-position: Centro 33%;

4 Modificare il comportamento di scorrimento del GIF con la proprietà "background-attachment". C'è solo una opzione per questo immobile; utilizzare questa linea per causare l'immagine di sfondo per rimanere sul posto quando la pagina viene fatta scorrere, creando un effetto visivo interessante:

background-attachment: fixed;

5 Esperimento con diverse combinazioni di proprietà descritte in precedenza per cogliere appieno l'effetto di ogni immagine di sfondo della pagina su.


Articoli Correlati