Come aggiungere un BG a una pagina

September 14

CSS, acronimo di Cascading Style Sheet, ha una proprietà utile BG è possibile utilizzare per migliorare i vostri siti web. Il BG, o proprietà background, consente agli sviluppatori di inserire le immagini in background di una pagina Web in una varietà di modi. La struttura BG ha anche un parametro di colore è possibile utilizzare per aggiungere colore alle pagine. Imparando alcune regole CSS, è possibile creare e aggiornare i sfondi rapidamente utilizzando poche righe di codice CSS.

istruzione

1 Avviare Blocco note e aprire uno dei documenti HTML.

2 Individuare la sezione "testa" del documento e incollare questo codice all'interno di tale sezione:

<Style type = "text / css">

corpo

{Background-color: blue;}

</ Style>

Questo codice CSS crea uno sfondo blu per la pagina Web.

3 Cambia il colore ad un altro colore come il rosso o il verde e salvare il documento. Aprire nel browser e visualizzare la pagina Web. Il suo sfondo sarà il colore selezionato.

4 Tornare al documento HTML. Sostituire il codice precedente con questo codice CSS:

<Style type = "text / css">

corpo

{

background-image: URL ( 'xyz.gif'); background-repeat: repeat;

}

</ Style>

Sostituire "xyz.gif" con il nome di un piccolo file di immagine sul disco rigido. Utilizzando il tag "background-image" fa sì che l'immagine che si sceglie di apparire come sfondo di una pagina Web. La proprietà "background-repeat" determina se questo si ripete di immagini o no. In questo esempio, il valore della proprietà è "ripetizione".

5 Salvare il documento e visualizzarlo nel browser. La pagina Web mostrerà un piastrellato, sfondo ripetendo.

6 Torna al documento HTML ed eliminare il codice CSS. Incollare il codice seguente al suo posto:

<Style type = "text / css">

corpo

{

background-image: URL ( 'xyz.jpg'); background-repeat: no-repeat; background-position: 100px 200px;

}

</ Style>

Sostituire "xyz.jpg" con il nome di un'immagine più grande sul disco rigido. Si noti che il "background-repeat" ha un valore di "no-repeat." Questo impedisce al browser di ripetizione dell'immagine. Il valore "background-position" consente di posizionare l'immagine sulla pagina Web. In questo caso, il primo valore, "100px," pone l'immagine a 100 pixel dal bordo sinistro della pagina. Il valore "200px" mette l'immagine a 200 pixel dall'alto.

7 Modificare questi valori di pixel per qualcosa che ti piace. Salvare il documento HTML e aprirlo nel browser. Una sola immagine, non ripetuto apparirà nella posizione impostata nel CSS.

Consigli e avvertenze

  • Ci sono altre proprietà che possono essere impostate per controllare il posizionamento e l'allineamento delle immagini di sfondo. Per esempio, invece di specificare la posizione di un'immagine su una pagina utilizzando pixel, è possibile utilizzare parole chiave come "sinistra" e "top". esercitazioni HTML online e libri possono aiutare a imparare queste proprietà dello sfondo.