Un file GIF contiene un'immagine compressa per l'uso su Internet. Alcune immagini GIF sono animati e verranno riprodotto automaticamente quando è incorporato in una pagina web. Un'immagine GIF può essere utilizzata come l'immagine di sfondo in una pagina Web. È possibile controllare la piastrellatura, il posizionamento e il comportamento di scorrimento della pagina Web utilizzando il codice CSS inline in un normale documento HTML.

Istruzioni

1

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

< style type = "text/css" >

corpo

{

background-image: URL("IMAGES/FILE. GIF");

}

< / stile >

2

Aggiungere la seguente riga sotto la riga "immagine di sfondo" per rimuovere il comportamento di affiancamento 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 inserire il file GIF in mezzo lo sfondo della pagina:

sfondo-posizione: centro 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 "al centro in basso" per inserire l'immagine lungo i bordi o negli angoli della pagina. Consente di posizionare l'immagine arbitrariamente le coordinate in pixel o percentuale. Ad esempio, questa riga inserirà l'immagine 100 pixel dalla parte superiore della pagina, a filo con il lato sinistro:

sfondo-posizione: 0px 100px;

I tipi di posizionamento possono essere mescolati insieme pure. Ad esempio, la seguente riga avrà al centro l'immagine orizzontalmente, un terzo dell'altezza della pagina dall'alto:

sfondo-posizione: centro 33%;

4

Alterare il comportamento di scorrimento dell'immagine GIF con la proprietà "background-attachment". C'è solo un'opzione per questa proprietà; utilizzare questa linea per causare l'immagine di sfondo rimanere sul posto quando si scorre la pagina, creando un interessante effetto visivo:

background-attachment: fisso;

5

Sperimentare con diverse combinazioni delle proprietà sopra per cogliere appieno l'effetto di ognuno sull'immagine di sfondo della pagina.