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.
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.